JS逐页转pdf文件为图片格式 |
您所在的位置：网站首页 › js读取pdf文件转成html › JS逐页转pdf文件为图片格式 |
JS逐页转pdf文件为图片格式
|
背景
年前的时候，开发一个电子杂志项目，功能需求是通过上传pdf文件，将其转为图片格式，所以杂志的内容其实就是一张张图片 不过当时技术要求用后端实现，所以使用的是PHP实现该功能。项目完成后，寻思着在前端是否也能实现pdf转图片的功能。一番研究后，果真可行。以下就分享如何通过前端js将pdf文件转为图片格式，并且支持翻页预览、以及图片打包下载 效果预览
所需工具 pdf.js（负责API解析，可将pdf文件渲染成canvas实现预览）pdf.worker.js（负责核心解析）jszip.js（将图片打包成生成.zip文件）Filesaver.js（保存下载zip文件） 工具下载 一、pdf.js及pdf.worker.js下载地址：http://mozilla.github.io/pdf.js/getting_started/#download 1.选择稳定版下载
2.解压后将bulid中的pdf.js及pdf.worker.js拷贝到项目中
二、jszip.js及Filesaver.js下载地址：https://stuk.github.io/jszip/ 1.点击download.JSZip
2.解压后将dist文件夹下的jszip.js文件以及vendor文件夹下的FileSaver.js文件拷贝到项目中
至此，所需工具已齐全。以下直接附上项目完整代码（代码可直接复制使用，查看效果。对应的文件需自行下载引入） 源代码：嫌麻烦的小伙伴可以直接在公众号后回复：pdf转图片 代码实现 PDF文件转图片 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: 600px; height: 780px; margin-top: 1%; border-radius: 2px; border: 2px solid #a29b9b; } .pdfInfos { margin: 0 2%; } 上一页 下一页 导出图片 选择一个pdf文件 页码： 文件名： 文件大小： 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; //重置总页数 var filesdata = $('#chooseFile')[0].files; //jquery获取到文件 返回属性的值 var fileSize = filesdata[0].size; //文件大小 var mb; if(fileSize) { mb = fileSize / 1048576; if(mb > 10) { alert("文件大小不能>10M"); return; } } $("#fileName").text(filesdata[0].name); $("#fileSize").text(mb.toFixed(2) + "Mb"); var reader = new FileReader(); reader.readAsDataURL(filesdata[0]); //将文件读取为 DataURL 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 |
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; //重置总页数
var filesdata = $('#chooseFile')[0].files; //jquery获取到文件 返回属性的值
var fileSize = filesdata[0].size; //文件大小
var mb;
if(fileSize) {
mb = fileSize / 1048576;
if(mb > 10) {
alert("文件大小不能>10M");
return;
}
}
$("#fileName").text(filesdata[0].name);
$("#fileSize").text(mb.toFixed(2) + "Mb");
var reader = new FileReader();
reader.readAsDataURL(filesdata[0]); //将文件读取为 DataURL
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 【本文地址】
今日新闻 |
推荐新闻 |