PDF文件转换图片加载到网页
2024-08-16 22:30:12
542
把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>效果展示：
下一篇： 没有了！
评论
最新发布
-
543
