2017-01-22 73 views
-2

在我的wordpress网站中,我想将pdf内容显示为我的文章内容。但普通的pdf嵌入方法嵌入了pdf阅读器框,并允许用户使用导航按钮移动页面到页面。如何在html中显示pdf文档的所有页面

如何将pdf的所有页面一次写入页面?所以用户需要滚动查看页面,而不是点击“下一页”图标或其他。

PS:当我试图使用iframe来实现这一点时,我在iframe中有第二个滚动条。

回答

0

使用Pdf.js

<html> 
<body> 

<!-- really dirty! this is just a test drive ;) --> 

<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script> 
<script type="text/javascript"> 
function renderPDF(url, canvasContainer, options) { 
    var options = options || { scale: 1 }; 

    function renderPage(page) { 
     var viewport = page.getViewport(options.scale); 
     var canvas = document.createElement('canvas'); 
     var ctx = canvas.getContext('2d'); 
     var renderContext = { 
      canvasContext: ctx, 
      viewport: viewport 
     }; 

     canvas.height = viewport.height; 
     canvas.width = viewport.width; 
     canvasContainer.appendChild(canvas); 

     page.render(renderContext); 
    } 

    function renderPages(pdfDoc) { 
     for(var num = 1; num <= pdfDoc.numPages; num++) 
      pdfDoc.getPage(num).then(renderPage); 
    } 
    PDFJS.disableWorker = true; 
    PDFJS.getDocument(url).then(renderPages); 
} 
</script> 

<div id="holder"></div> 

<script type="text/javascript"> 
renderPDF('sample.pdf', document.getElementById('holder')); 
</script> 

</body> 
</html> 
+0

'PDFJS.disableWorker = TRUE;'必须PDFJS.getDocument后使用 – async5

相关问题