pdf.js实现的PDF加载到页面查看简单示例

刺骨的言语ヽ痛彻心扉 2021-07-05 02:10 728阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> .pdfClass { border: 1px solid black; } </style>
        <script src="pdf.js"></script>
    </head>
    <body>
    <div class="wrapper" id="pdf-container">
    </div>
    
    <script> //程序只能在服务器上运行 window.onload = function() { //创建 function createPdfContainer(id, className) { var pdfContainer = document.getElementById('pdf-container'); var canvasNew = document.createElement('canvas'); canvasNew.id = id; canvasNew.className = className; pdfContainer.appendChild(canvasNew); }; //渲染pdf //建议给定pdf宽度 function renderPDF(pdf, i, id) { pdf.getPage(i).then(function(page) { var scale = 1.5; var viewport = page.getViewport(scale); // // 准备用于渲染的 canvas 元素 // var canvas = document.getElementById(id); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // // 将 PDF 页面渲染到 canvas 上下文中 // var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }; //创建和pdf页数等同的canvas数 function createSeriesCanvas(num, template) { var id = ''; for (var j = 1; j <= num; j++) { id = template + j; createPdfContainer(id, 'pdfClass'); } } //读取pdf文件，并加载到页面中 function loadPDF(fileURL) { PDFJS.getDocument(fileURL).then(function(pdf) { //用 promise 获取页面 var id = ''; var idTemplate = 'cw-pdf-'; var pageNum = pdf.numPages; //根据页码创建画布 createSeriesCanvas(pageNum, idTemplate); //将pdf渲染到画布上去 for (var i = 1; i <= pageNum; i++) { id = idTemplate + i; renderPDF(pdf, i, id); } }); } //如果在本地运行，需要从服务器获取pdf文件 loadPDF('tbt.pdf'); }; </script>
    </body>
    
    </html>

![在这里插入图片描述][2020071616221896.png]

[2020071616221896.png]: /images/20210704/5f98b4db4caf4cb1abc48989fd078bca.png