devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：知新_RL | 2024-04-25 00:44:05

赞

踩

pdfjs生成图片

写这个的原因就是打电子发票不方便，这个代码是纯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>


  • 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
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/482399
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号