前端使用pdf.js实现pdf转为图片
更新时间：2024年04月03日 11:35:06 作者：cqwuliu
这篇文章主要为大家详细介绍了前端如何使用pdf.js实现pdf转为图片功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
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="http://9i0i.com/pic.php?p=js/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="http://9i0i.com/pic.php?p=js/2.2.228pdf.min.js"></script>
<script type="text/javascript" src="http://9i0i.com/pic.php?p=js/2.2.228.pdf.worker.min.js"></script>
<!--
<script src="http://9i0i.com/pic.php?p=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="http://9i0i.com/pic.php?p=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="http://9i0i.com/pic.php?p=js/jszip.js"></script>
<script type="text/javascript" src="http://9i0i.com/pic.php?p=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="http://9i0i.com/pic.php?p=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转为图片的文章就介绍到这了,更多相关pdf.js实现pdf转图片内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了使用js让图片组成动画,这样就可以用js做动画了，大家参考使用吧2014-01-01
本文分析一下将页面table内容与样式另存成excel文件的方法，主要介绍style与class之间的区别问题。2015-08-08
JavaScript使用Prototype实现面向对象的方法
这篇文章主要介绍了JavaScript使用Prototype实现面向对象的方法,实例分析了Prototype属性的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了ES6基础之数组和对象的拓展,结合实例形式详细分析了ES6数组和对象拓展运算符、拓展方法的使用及相关操作技巧,需要的朋友可以参考下2019-08-08
js(JavaScript)实现TAB标签切换效果的简单实例
本篇文章主要是对js(JavaScript)实现TAB标签切换效果的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了细数promise与async/await的使用及区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
很多使用javascript的朋友都有着这样一个问题:script标签属性type与language使用应如何选择，为解决此疑惑，本文详细整理了一下，需要的朋友可以参考下2012-12-12
搜索框无论是在电商网站还是小程序中都很常见，这篇文章主要就为大家详细介绍了小程序如何实现搜索框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
用roll.js实现的图片自动滚动+鼠标触动的特效...2007-03-03
本篇文章给大家详细分析了javascript变量提升和闭包的相关知识点，对此有兴趣的朋友可以参考下。2018-03-03
最新评论