前端使用pdf.js实现pdf转为图片

PDF.js是一个用于在网页中显示PDF文档的JavaScript库。它是由Mozilla开发的，是一个完全免费、开源的工具。

安装 PDF.js

安装PDF.js有两种方法：

方法1：通过npm安装

可以通过npm安装PDF.js，使用以下命令：

npm install pdfjs-dist

这样就会在你的项目中安装PDF.js。

方法2：手动下载

也可以从官方网站https://mozilla.github.io/pdf.js/getting_started/手动下载PDF.js。下载后，将pdf.js和pdf.worker.js文件放到你的项目中。

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

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset=\”utf-8\” />
<title>PDF文件转图片</title>
<script type=\”text/javascript\” src=\”js/jquery-3.6.4.min.js\”></script>

<!–

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]
}