前端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; //重置总页数
				debugger
				var 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]); //将文件读取为 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 <= 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.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()
		}
	</script>
</html>
 复制

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

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

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【html】新建一个html并且在浏览器运行

SSM基于html的网上购物系统2nluo 在线充值

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000


	<!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; //重置总页数
	debugger
	var 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]); //将文件读取为 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 <= 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.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()
	}
	</script>
	</html>

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

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

微信扫一扫：分享