前端pdf.js将pdf转为图片，尤其适合电子发票打印

写这个的原因就是打电子发票不方便，这个代码是纯js不需要后端服务直接将两张电子发票的pdf转为两张图片渲染到一张A4纸上面（完全不浪费，发票也不会变大），自动完成打印分页，点击打印即可。亲测可用所有电子发票。


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>PDF文件转图片</title><script type="text/javascript" src="js/jquery-3.6.4.min.js"></script><script type="text/javascript" src="js/2.2.228pdf.min.js"></script><script type="text/javascript" src="js/2.2.228.pdf.worker.min.js"></script><!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js" integrity="sha512-Q0SyiCpjyVOjMJ28RDpmCxi0Drmc9cr7fBQuW2F5F7yiS0yTWtbbltd+H5BYhaA7Izpm6nyIXAUppQfdm6zt1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.worker.min.js" integrity="sha512-kxBikBDcUHWvfvzNZVSRe+1mJ2MSHFe5+WVUCdTTUN3oHo/3GWPDUhiO0jtFCUcs+VnSk6BMGYC3IGuwe3qXVg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>--><script type="text/javascript" src="js/jszip.js"></script><script type="text/javascript" src="js/FileSaver.js"></script><style type="text/css">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%;}</style></head><body><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 onclick="wind_print()">打印</button><button onclick="choosePdf()">选择多个pdf文件</button><input style="display:none" id='chooseFile' type='file' accept="application/pdf" multiple="multiple"></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 id="imgloading" style="position: absolute;top: 20%;left: 2%;display:none" src="loading.gif"></div></body><script>$("#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 fileSize=0;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 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) { //逐页解析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;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.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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/794151.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java中的网络编程（一）

Java中的网络编程（一）

一、网络编程概述 什么是计算机网络把不同区域的计算机&#xff08;广义&#xff09;通过通信设备和线路连接&#xff0c;可以实现数据的传输和共享的系统。实现不同计算机之间的练习&#xff0c;必须有介质连接。网络编程是干什么的聊天-->聊天软件 QQjava语言是支持网络间…
阅读更多...
从人机界面设计黄金三法则视角看 ChatGPT 的界面设计的“好”与“坏”

从人机界面设计黄金三法则视角看 ChatGPT 的界面设计的“好”与“坏”

热门文章推荐&#xff1a; &#xff08;1&#xff09;《为什么很多人工作 3 年 却只有 1 年经验&#xff1f;》&#xff08;2&#xff09;《一文掌握大模型提示词技巧&#xff1a;从战略到战术巧》&#xff08;3&#xff09;《AI 时代&#xff0c;程序员的出路在何方&#xff1…
阅读更多...
数组方法汇总

数组方法汇总

数组和链表类似&#xff0c;都是用双指针&#xff0c;但数组不需要额外的指针&#xff0c;可以使用索引来当作指针。&#xff08;链表的时候要注意&#xff0c;什么时候是移动的指针&#xff0c;什么时候是改变的节点&#xff09;删除有序数组中的重复项 注意&#xff0c;本题中…
阅读更多...
C语言经典例题(18) --- 判断字母、三角形判断、衡量人体胖瘦程度、翻转金字塔图案、平均身高

C语言经典例题(18) --- 判断字母、三角形判断、衡量人体胖瘦程度、翻转金字塔图案、平均身高

1.判断是不是字母 题目描述: KK想判断输入的字符是不是字母&#xff0c;请帮他编程实现。 输入描述: 多组输入&#xff0c;每一行输入一个字符。 输出描述: 针对每组输入&#xff0c;输出单独占一行&#xff0c;判断输入字符是否为字母&#xff0c;输出内容详见输出样例。 输…
阅读更多...
36.基于CAS实现的java类

36.基于CAS实现的java类

JUC, java.util.concurrent并发工具包下。 1.原子整数 AtomicInteger AtomicLong AtomicBoolean 底层用的CAS来实现。 AtomicInteger类的incrementAndGet方法&#xff0c;addAndGet方法 public static void main(String[] args) {AtomicInteger atomicInteger new Atom…
阅读更多...
突破编程_C++_网络编程（TCPIP 四层模型（网络层（1））

突破编程_C++_网络编程（TCPIP 四层模型（网络层（1））

1 网络层概述 TCP/IP 四层模型中的网络层是模型中的核心组成部分&#xff0c;它主要负责处理数据包的路由和转发&#xff0c;确保数据能够在源主机和目标主机之间准确地传输。 一、主要功能 网络层的主要功能是实现数据包的选路和转发。当数据从应用层传输到传输层后&#x…
阅读更多...
Coursera自然语言处理专项课程04：Natural Language Processing with Attention Models笔记 Week01

Coursera自然语言处理专项课程04：Natural Language Processing with Attention Models笔记 Week01

Natural Language Processing with Attention Models Course Certificate 本文是学习这门课 Natural Language Processing with Attention Models的学习笔记&#xff0c;如有侵权&#xff0c;请联系删除。 文章目录 Natural Language Processing with Attention ModelsWeek 01…
阅读更多...
c# wpf style 简单试验

c# wpf style 简单试验

1.概要 wpf style 用来控制控件的样式 2.代码 <Window x:Class"WpfApp2.Window5"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.…
阅读更多...
MCAL SPI配置

MCAL SPI配置

用的是Qspi0 SpiDriver 要配置 4个选项 Spichannel SpiExternalDevice SpiJob SpiSequence Mcu 模块配置 dma配置
阅读更多...
数组分割

数组分割

题目 问题描述 小蓝有一个长度为 N 的数组 A [A0, A1, . . .&#xff0c;AN−1]。现在小蓝想要从 A 对应的数组下标所构成的集合 I {0, 1, 2, . . . , N − 1} 中找出一个子集 R1&#xff0c;那么 R1在 I 中的补集为 R2。记 S1 ∑ r ∈ R1 Ar&#xff0c;S2 ∑ r ∈ R2 Ar…
阅读更多...
职场迷航？MBTI测试为你指明方向，找到最匹配的职业！

职场迷航？MBTI测试为你指明方向，找到最匹配的职业！

MBTI简介 MBTI的全名是Myers-Briggs Type Indicator。它是一种迫选型、自我报告式的性格评估工具&#xff0c;用以衡量和描述人们在获取信息、作出决策、对待生活等方面的心理活动规律和性格类型。 类型指标 美国的凯恩琳布里格斯和她的女儿伊莎贝尔布里格斯迈尔斯研制了迈尔…
阅读更多...
归类一些vim的插件，需要时来看

归类一些vim的插件，需要时来看

本文结构&#xff1a; a、简介 b、一些插件名称及简要介绍 a、之前我一篇文章说了在vim中安装了一个可以自动补全")",">"等符号的插件autopairs,里面也有详细的安装及配置步骤。基于有些小伙伴想要了解些别的vim插件和自己有时候可能会有些灵感想要写…
阅读更多...
开发环境-＞生产环境

开发环境-＞生产环境

1、数据迁移 不涉及docker # 以数据库用户导出数据 mysqldump -h 192.168.1.168 -P 3307 -u abragent -pabragebb17 abragent > abragent.sql# 以root用户导出数据 mysqldump -h 192.168.1.168 -P 3307 -u root -p8d3Ba1b abragent > abragent.sql 涉及docker …
阅读更多...
递归算法练习

递归算法练习

递归算法是所有算法中较难的一种&#xff0c;依靠他代码的简洁和清晰地逻辑很受人们喜欢&#xff0c;但是新手入门递归还是会被他不同寻常的思路吓到&#xff0c;其实面对递归问题我们只需要看清题目&#xff0c;分析出要求&#xff0c;有清晰的解题思路&#xff0c;只要仔细分…
阅读更多...
十九、Rust Tcp Rpc 示例

十九、Rust Tcp Rpc 示例

前一篇&#xff0c;我们演示了 rust grpc 的应用&#xff0c;但 grpc 是基于 http 的&#xff0c;按理说其协议更重&#xff0c;同时也确见到网友验证过&#xff0c;相比 http 的 rpc&#xff0c;tpc 下的 rpc 性能确实更有优势。 同时&#xff0c;不同于 grpc 要编写一份 “中…
阅读更多...
系统分析师-综合知识-应用数学与经济管理

系统分析师-综合知识-应用数学与经济管理

系统分析师-综合知识-应用数学与经济管理 更多软考资料 https://ruankao.blog.csdn.net/ 文章目录 系统分析师-综合知识-应用数学与经济管理概述最小生成树真题-给出图真题-给出表 最短路径关键路径关键路径基本关键路径升级 网络与最大流量指派问题最小解最大解 线性规划决策…
阅读更多...
软考--软件设计师（软件工程总结2）

软考--软件设计师（软件工程总结2）

目录 1.测试方法 2.软件项目管理 3.软件容错技术 4.软件复杂性度量 5.结构化分析方法&#xff08;一种面向数据流的开发方法&#xff09; 6.数据流图 1.测试方法 软件测试&#xff1a;静态测试&#xff08;被测程序采用人工检测&#xff0c;计算机辅助静态分析的手段&…
阅读更多...
虚拟机打不开

虚拟机打不开

问题 另一个程序已锁定文件的一部分&#xff0c;进程无法访问 打不开磁盘“G:\centeros\hadoop104kl\hadoop100-cl2.vmdk”或它所依赖的某个快照磁盘。 模块“Disk”启动失败。 未能启动虚拟机。 原因 前一次非正常关闭虚拟机导致.lck 文件是VMWare软件的一种磁盘锁文件&…
阅读更多...
蓝桥杯算法题：外卖店优先级

蓝桥杯算法题：外卖店优先级

“饱了么”外卖系统中维护着 N 家外卖店&#xff0c;编号 1∼N。每家外卖店都有一个优先级&#xff0c;初始时 (0时刻) 优先级都为 0。每经过 1个时间单位&#xff0c;如果外卖店没有订单&#xff0c;则优先级会减少 1&#xff0c;最低减到 0&#xff1b;而如果外卖店有订单&am…
阅读更多...
特定领域软件体系结构

特定领域软件体系结构

1.DSSA的定义 简单地说&#xff0c;DSSA&#xff08;Domain Specific Software Architecture&#xff09;就是在一个特定应用领域中为一组应用提供组织结构参考的标准软件体系结构。 从功能覆盖的范围的角度有两种理解DSSA中领域的含义的方式&#xff1a; &#xff08;1&#x…
阅读更多...
最新文章

Copyright @ 2022~2023