PDF文件转换图片加载到网页
2024-08-16 22:30:12
563
把PDF文件转换成图片在加载到网页上面,实现pdf 网页端打开,可以避免控制PDF的高度问题,示例:
<div id="image-container" ></div> <script src="../js/pdf.js" ></script> <script src="../js/html2canvas.esm.min.js" type="module" ></script> <script> // 假设你有一个PDF文件的URL var pdfUrl = '/static/upload/file/20240509/1715242623550498.pdf'; document.addEventListener('DOMContentLoaded', async function () { // 确保canvas和image容器存在 const pdf = await pdfjsLib.getDocument(pdfUrl).promise; var totalPages = pdf.numPages; var imgPromises = []; // 存储所有html2canvas的promise for (var i = 1; i <= totalPages; i++) { var canvasNew = document.createElement('canvas'); // 还可以设置其他属性,如ID canvasNew.id = 'pdf-render-' + i; // 获取要添加canvas的容器元素,例如body var container = document.getElementById('image-container'); // 或者其他DOM元素 container.appendChild(canvasNew); var canvas = document.getElementById('pdf-render-' + i); const page = await pdf.getPage(i); const scale = 1.5; const viewport = page.getViewport({ scale: scale }); // 准备canvas元素 canvas.height = viewport.height; canvas.width = viewport.width; const context = canvas.getContext('2d'); // 渲染PDF页面到canvas const renderContext = { canvasContext: context, viewport: viewport }; await page.render(renderContext).promise; } }); </script>
效果展示:
下一篇: 没有了!