js如何將PDF的內(nèi)容轉成圖片顯示出來
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
 ：js如何將PDF的內(nèi)容轉成圖片顯示出來 <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script> <meta charset="utf-8"> <title></title> </head> <body> <input type="file" id="fileInput" accept=".pdf"/> <div id="pdf-container"></div> <script src="script.js"></script> </body>
<script> document.getElementById('fileInput').addEventListener('change', function(event) { const file = event.target.files[0]; //alert(file) if (file && file.type === 'application/pdf') { const fileReader = new FileReader(); fileReader.onload = function() { const typedArray = new Uint8Array(this.result);
// 使用 pdf.js 加載 PDF pdfjsLib.getDocument(typedArray).promise.then(pdf => { const pdfContainer = document.getElementById('pdf-container'); pdfContainer.innerHTML = ''; // 清空之前的內(nèi)容
// 將 PDF 每一頁轉為圖片 for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) { pdf.getPage(pageNum).then(page => { const viewport = page.getViewport({ scale: 1.5 }); const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; pdfContainer.appendChild(canvas);
const context = canvas.getContext('2d'); const renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); } }); };
// 讀取PDF文件 fileReader.readAsArrayBuffer(file); } else { alert('請選擇一個 PDF 文件。'); } }); </script> </html> 該文章在 2025/1/21 17:19:33 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
