js如何将PDF的内容转成图片显示出来
当前位置：点晴教程→知识管理交流
→『 技术文档交流 』
 ：js如何将PDF的内容转成图片显示出来 <!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 = ''; // 清空之前的内容
// 将 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
