怎么优化推广自己的网站,厦门网站综合优化贵吗,聊城那里做网站,网站做xss过滤写这个的原因就是打电子发票不方便#xff0c;这个代码是纯js不需要后端服务直接将两张电子发票的pdf转为两张图片渲染到一张A4纸上面#xff08;完全不浪费#xff0c;发票也不会变大#xff09;#xff0c;自动完成打印分页#xff0c;点击打印即可。亲测可用所有电子发…写这个的原因就是打电子发票不方便这个代码是纯js不需要后端服务直接将两张电子发票的pdf转为两张图片渲染到一张A4纸上面完全不浪费发票也不会变大自动完成打印分页点击打印即可。亲测可用所有电子发票。 !DOCTYPE html
htmlheadmeta charsetutf-8 /titlePDF文件转图片/titlescript typetext/javascript srcjs/jquery-3.6.4.min.js/scriptscript typetext/javascript srcjs/2.2.228pdf.min.js/scriptscript typetext/javascript srcjs/2.2.228.pdf.worker.min.js/script!--script srchttps://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js integritysha512-Q0SyiCpjyVOjMJ28RDpmCxi0Drmc9cr7fBQuW2F5F7yiS0yTWtbbltdH5BYhaA7Izpm6nyIXAUppQfdm6zt1w crossoriginanonymous referrerpolicyno-referrer/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.worker.min.js integritysha512-kxBikBDcUHWvfvzNZVSRe1mJ2MSHFe5WVUCdTTUN3oHo/3GWPDUhiO0jtFCUcsVnSk6BMGYC3IGuwe3qXVg crossoriginanonymous referrerpolicyno-referrer/script--script typetext/javascript srcjs/jszip.js/scriptscript typetext/javascript srcjs/FileSaver.js/scriptstyle typetext/cssbutton {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%;}/style/headbodydiv classshowdata stylemargin-top:1%button idpdf_tourl合并多个pdf为一个/buttonbutton idprevpage上一页/buttonbutton idnextpage下一页/buttonbutton idexportImg导出每一张图片/buttonbutton onclickwind_print()打印/buttonbutton onclickchoosePdf()选择多个pdf文件/buttoninput styledisplay:none idchooseFile typefile acceptapplication/pdf multiplemultiple/divdiv classshowdata stylemargin-top:1%span classpdfInfos页码span idcurrentPages/spanspan idtotalPages/span/spanspan classpdfInfos文件名span idfileName/span/spanspan classpdfInfos文件大小span idfileSize/span/span/divdiv styleposition: relative;div idcontainer/divimg idimgloading styleposition: absolute;top: 20%;left: 2%;display:none srcloading.gif/div/bodyscript$(#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; //重置总页数debuggervar filesdata $(#chooseFile)[0].files; //jquery获取到文件 返回属性的值//文件大小var fileSize0;for (let i 0; i filesdata.length; i) {fileSize filesdata[i].size;}var mb;if (fileSize) {mb fileSize / 1048576;if (mb 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]); //将文件读取为 DataURLfor (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);//遍历动态创建canvasfor (var i 1; i totalPages; i) {var canvas document.createElement(canvas);var cidji;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) { //逐页解析PDFvar 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 1) {return;}nowpage currentPages;currentPages--;$(#currentPages).text(currentPages /);var prevcanvas document.getElementById(pageNum currentPages);var currentcanvas document.getElementById(pageNum nowpage);currentcanvas.style.display none;prevcanvas.style.display block;})//下一页$(#nextpage).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;base64images.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.jssaveAs(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()}/script
/html
