如何在html中顯示pdf文檔的所有頁面

-2

在我的wordpress網站中，我想將pdf內容顯示爲我的文章內容。但普通的pdf嵌入方法嵌入了pdf閱讀器框，並允許用戶使用導航按鈕移動頁面到頁面。如何在html中顯示pdf文檔的所有頁面

如何將pdf的所有頁面一次寫入頁面？所以用戶需要滾動查看頁面，而不是點擊「下一頁」圖標或其他。

PS：當我試圖使用iframe來實現這一點時，我在iframe中有第二個滾動條。

2017-01-22 Bora

使用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>

來源

2017-01-22 10:33:54

'PDFJS.disableWorker = TRUE;'必須PDFJS.getDocument後使用 – async5

如何在html中顯示pdf文檔的所有頁面

回答

相關問題