写这个的原因就是打电子发票不方便，这个代码是纯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 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;
}
.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) {
$("#container").empty();
currentPages = 1;
totalPages = 0;
debugger
var filesdata = $('#chooseFile')[0].files;
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");
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) {
if (pdf) {
totalPages = pdf.numPages;
$("#currentPages").text("1/");
$("#totalPages").text(totalPages);
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) {
var viewport = page.getViewport(scale);
var newcanvas = canvasContext.canvas;
newcanvas.width = viewport.width;
newcanvas.height = viewport.height;
newcanvas.style.width = "100%";
newcanvas.style.height = "100%";
if (pageNumber != 1) {
newcanvas.style.display = "none";
}
var renderContext = {
canvasContext: canvasContext,
viewport: viewport
};
page.render(renderContext);
});
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;
}
var zip = new JSZip();
var images = zip.folder("images");
$("canvas").each(function(index, ele) {
var canvas = document.getElementById("pageNum" + (index + 1));
images.file("photo-" + (index + 1) + ".png", splitBase64(canvas.toDataURL("image/png", 1.0)), {
base64: true
});
})
zip.generateAsync({
type: "blob"
}).then(function(content) {
saveAs(content, "imgFiles.zip");
});
});
function splitBase64(dataurl) {
var arr = dataurl.split(',')
return arr[1]
}
function choosePdf() {
$("#chooseFile").click()
}
</script>
</html>
