PDF文件转换图片加载到网页


把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>

效果展示:





评论