PDF.js是一个用于在网页中显示PDF文档的JavaScript库。它是由Mozilla开发的，是一个完全免费、开源的工具。
安装 PDF.js
安装PDF.js有两种方法：
方法1：通过npm安装
可以通过npm安装PDF.js，使用以下命令：
1 | npm install pdfjs-dist |
这样就会在你的项目中安装PDF.js。
方法2：手动下载
也可以从官方网站https://mozilla.github.io/pdf.js/getting_started/手动下载PDF.js。下载后，将pdf.js和pdf.worker.js文件放到你的项目中。
前端pdf.js将pdf转为图片，尤其适合电子发票打印
示例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 | <title>PDF文件转图片</title> button { width: 120px; height: 30px; background: none; border: 1px solid #b1afaf; border-radius: 5px; font-size: 12px; font-weight: 1000; color: #384240; cursor: pointer; outline: none; margin: 0 0.5% } button:hover { background: #ccc; } #container { width: 65%; height: 75%; margin-top: 1%; border-radius: 2px; /*border: 2px solid #a29b9b;*/ } .pdfInfos { margin: 0 2%; } <div class="showdata" style="margin-top:1%"> <button id="pdf_tourl">合并多个pdf为一个</button> <button id="prevpage">上一页</button> <button id="nextpage">下一页</button> <button id="exportImg">导出每一张图片</button> <button>打印</button> <button>选择多个pdf文件</button> </div> <div class="showdata" style="margin-top:1%"> <span class="pdfInfos">页码：<span id="currentPages"></span><span id="totalPages"></span></span> <span class="pdfInfos">文件名：<span id="fileName"></span></span> <span class="pdfInfos">文件大小：<span id="fileSize"></span></span> </div> <div style="position: relative"> <div id="container"></div> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/04/frc-432c1179be78b0f6cee316efb172e592.gif"></div> $("#pdf_tourl").click(function(){ alert("可以使用PDF Arranger软件"); }); function wind_print(){ $(".showdata").hide(); $("#container").css("width","100%"); $("#container").css("height","100%"); window.print(); $(".showdata").show(); $("#container").css("width","65%"); $("#container").css("height","75%"); } var currentPages, totalPages //声明一个当前页码及总页数变量 var scale = 2; //设置缩放比例，越大生成图片越清晰 $('#chooseFile').change(function() { var pdfFilePath = $('#chooseFile').val(); if (pdfFilePath) { //$("#imgloading").css('display', 'block'); $("#container").empty(); //清空上一PDF文件展示图 currentPages = 1; //重置当前页数 totalPages = 0; //重置总页数 debugger var filesdata = $('#chooseFile')[0].files; //jquery获取到文件 返回属性的值 //文件大小 var fileSize=0; for (let i = 0; i 10) { alert("文件大小不能>10M"); return; } } if (filesdata.length === 1) { $("#fileName").text(filesdata[0].name); } else { $("#fileName").text(filesdata[0].name + "等 " + filesdata.length + " 个文件"); } $("#fileSize").text(mb.toFixed(2) + "Mb"); //reader.readAsDataURL(filesdata[0]); //将文件读取为 DataURL for (let j = 0; j < filesdata.length; j++) { var reader = new FileReader(); reader.readAsDataURL(filesdata[j]); reader.onload = function(e) { //文件读取成功完成时触发 pdfjsLib.getDocument(this.result).then(function(pdf) { //调用pdf.js获取文件 if (pdf) { totalPages = pdf.numPages; //获取pdf文件总页数 $("#currentPages").text("1/"); $("#totalPages").text(totalPages); //遍历动态创建canvas for (var i = 1; i <= totalPages; i++) { var canvas = document.createElement('canvas'); var cid=j+i; canvas.id = "pageNum" + cid; $("#container").append(canvas); var context = canvas.getContext('2d'); renderImg(pdf, i, context); } } }); }; } } }); //渲染生成图片 function renderImg(pdfFile, pageNumber, canvasContext) { pdfFile.getPage(pageNumber).then(function(page) { //逐页解析PDF var viewport = page.getViewport(scale); // 页面缩放比例 var newcanvas = canvasContext.canvas; //设置canvas真实宽高 newcanvas.width = viewport.width; newcanvas.height = viewport.height; //设置canvas在浏览中宽高 newcanvas.style.width = "100%"; newcanvas.style.height = "100%"; //默认显示第一页，其他页隐藏 if (pageNumber != 1) { newcanvas.style.display = "none"; } var renderContext = { canvasContext: canvasContext, viewport: viewport }; page.render(renderContext); //渲染生成 }); //$("#imgloading").css('display', 'none'); return; }; //上一页 $("#prevpage").click(function() { if (!currentPages || currentPages = totalPages) { return; } nowpage = currentPages; currentPages++; $("#currentPages").text(currentPages + "/"); var nextcanvas = document.getElementById("pageNum" + currentPages); var currentcanvas = document.getElementById("pageNum" + nowpage); currentcanvas.style.display = "none"; nextcanvas.style.display = "block"; }) //导出图片 $("#exportImg").click(function() { if (!$('#chooseFile').val()) { alert('请先上传pdf文件') return false; } //$("#imgloading").css('display', 'block'); var zip = new JSZip(); //创建一个JSZip实例 var images = zip.folder("images"); //创建一个文件夹用来存放图片 //遍历canvas，将其生成图片放进文件夹images中 $("canvas").each(function(index, ele) { var canvas = document.getElementById("pageNum" + (index + 1)); //将图片放进文件夹images中 //参数1为图片名称，参数2为图片数据（格式为base64，需去除base64前缀 data:image/png;base64） images.file("photo-" + (index + 1) + ".png", splitBase64(canvas.toDataURL("image/png", 1.0)), { base64: true }); }) //打包下载 zip.generateAsync({ type: "blob" }).then(function(content) { //saveAs(content, "picture.zip"); //saveAs依赖的js文件是FileSaver.js saveAs(content, "imgFiles.zip"); //saveAs依赖的js文件是FileSaver.js //$("#imgloading").css('display', 'none'); }); }); //截取base64前缀 function splitBase64(dataurl) { var arr = dataurl.split(',') return arr[1] } function choosePdf() { $("#chooseFile").click() } |
效果图
到此这篇关于前端使用pdf.js实现pdf转为图片的文章就介绍到这了,更多相关pdf.js实现pdf转图片内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
