使用JS将PDF文档转成图片,一页文档对应一张图片,并支持将图片批量导出! |
您所在的位置:网站首页 › pdf导出成图片 › 使用JS将PDF文档转成图片,一页文档对应一张图片,并支持将图片批量导出! |
之前的一个项目中碰到的问题,使用场景是:用户会将一份PDF格式的协议上传到页面,我们需要将这份协议转换成多张图片(一页文档对应一张图片),转换完成之后,用户点击导出按钮,将转换完成的图片通过压缩文件的方式导出!实现效果、在线Demo、Github地址。 要想实现这个场景功能需要解决以下几个问题: 1. 用户上传文档后,怎么将文档展示在页面供用户浏览! 2. 是否可以直接利用JS在前端完成,这样省去了后端处理,提供URL再让用户下载的麻烦!3. 假如直接利用JS实现该功能,处于安全策略,JS是不能直接打开本地文件! 既然问题提出来了,我们就一个一个的解决。
针对问题1:用户上传文档后,怎么将文档展示在页面供用户浏览! (1)、如果是单纯的PDF文档展示在网页中,我们可以利用HTML的标签,并且效果也不错。 (2)、但是我们这里需要的是将PDF转化成图片或者canvas,这就不得不说PDF.js了,PDF.js可以将PDF文档转换成canvas实现预览,有了canvas,我们就有了图片。其中这个JS框架使用起来也很简单,前往项目官网下载主要的pdf.js文件,并将其引入项目,具体的使用方法可自行百度、Google.
针对问题2:在实现问题1的基础上,批量下载图片! (1)、如果只是单个下载图片,比如下载一张图片,可通过如下代码实现(利用标签的相关属性) var a = $("") .attr("href", "http://i.stack.imgur.com/L8rHf.png") .attr("download", "img.png") .appendTo("body");
(2)、如果要支持批量下载图片,可使用jszip.js实现多张图片添加到压缩文件供下载,使用FileSaver.js实现压缩文件的保存、下载!其中需要注意的是jszip下载的数据流为blob,可使用如下方法将dataUrl转换为blob,FileSaver.js也提供了相应的函数功能,这里使用百度出的一段代码。 //dataURL转成Blob function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type: mime}); } 针对问题3:JS如何打开本地文件! 出于安全策略,JS不能随意操作文件,可利用FileReader实现本地文件的打开,具体的实现方法可自行搜索或参考项目中的解决方案。
总结:以上就实现了PDF文档转换成图片、并支持批量下载图片的功能!实现效果如下:
|
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |