使用JS将PDF文档转成图片，一页文档对应一张图片，并支持将图片批量导出！

之前的一个项目中碰到的问题，使用场景是：用户会将一份PDF格式的协议上传到页面，我们需要将这份协议转换成多张图片（一页文档对应一张图片），转换完成之后，用户点击导出按钮，将转换完成的图片通过压缩文件的方式导出！实现效果、在线Demo、Github地址。

　　
要想实现这个场景功能需要解决以下几个问题：

1. 用户上传文档后，怎么将文档展示在页面供用户浏览！
2. 是否可以直接利用JS在前端完成，这样省去了后端处理，提供URL再让用户下载的麻烦！

3. 假如直接利用JS实现该功能，处于安全策略，JS是不能直接打开本地文件！

既然问题提出来了，我们就一个一个的解决。

针对问题1：用户上传文档后，怎么将文档展示在页面供用户浏览！

(1)、如果是单纯的PDF文档展示在网页中，我们可以利用HTML的<embed>标签，并且效果也不错。

(2)、但是我们这里需要的是将PDF转化成图片或者canvas，这就不得不说PDF.js了，PDF.js可以将PDF文档转换成canvas实现预览，有了canvas，我们就有了图片。其中这个JS框架使用起来也很简单，前往项目官网下载主要的pdf.js文件，并将其引入项目，具体的使用方法可自行百度、Google.

针对问题2：在实现问题1的基础上，批量下载图片！

(1)、如果只是单个下载图片，比如下载一张图片，可通过如下代码实现（利用<a>标签的相关属性）

 var a = $("<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文档转换成图片、并支持批量下载图片的功能！实现效果如下：

使用JS将PDF文档转成图片，一页文档对应一张图片，并支持将图片批量导出！相关推荐

如何将CSDN文档转换成IPYNB格式的文档？
简介: ※IPYNB格式的文档可以很方便在Jupyter Notebook环境内方便研究人员对于算法.数据进行操作.Markdown文本则便于形成各种网络文档.本文介绍了利用notedown实现将C ...
如何把文档转成html格式转换,文档格式转换工具Print2Flash使用教程：如何将文档转换为Print2Flash格式件或HTML5文件？...
Print2Flash是一款强大的文件格式转换及文档发布工具.可以轻松实现可打印文档(如Word.PDF文档.PPT或是Excel电子表格)转换到 Adobe ® Flash ®文件(swf).htm ...
php如何将文档转成flas,为php4加入动态flash文件的生成的支持
为php4加入动态flash文件的生成的支持 2021-01-21 3:41:08677 想象过在网站上动态生成flash动画吗,本文就让你步入php+flash的激动时代. php真是个好东西呀,真 ...
什么是五档即成剩撤？
什么是五档即成剩撤? 五档即成剩撤 :交易后,如果有没成交的自动撤销挂单. 五档即成转限价; 如果没成交自动转到当时价格,挂在那里等待成交. 限价委托客户向证券经纪商发出买卖某种股票的指令时,对买卖 ...
WORD文档转换成PDF格式
由于一个客户的项目中需要将WORD文档转换成PDF格式,实战教程如下: 需求分析:客户的项目以B/S结构为主,提供一个WORD文件在后台自动转换成PDF,经过实际测试, 如果该篇WORD文档有100 ...
android 如何将WPS文档转成PDF
今天,简单讲讲android里如何将WPS文档转成PDF格式的文档. 这个其实也很简单 ,也和android的关系不大.大家如何不想看就不用继续看了.之前我一直在写文档,最后总是是完成的文档,但是领导 ...
多个ai文件合并成pdf_如何将多个文档合并成PDF？
在处理PDF文件时,我们有时候需要将多个PDF文件合并成一个,那么应该如何实现呢?今天小编在这里分享一个特别简单的方法,不用借助PDF编辑器或者转换器,用虚拟打印机就可以实现?怎么实现呢,下面请看详细 ...
迅捷PDF转换器如何将PDF文档转成Word
办公中常用PDF文件的小伙伴应该都有了解,PDF文件阅读起来很方便,但是编辑起来比较麻烦.如果遇到PDF文件需要编辑修改的情况,大多都会选择将PDF转换成Word文件,在Word中编辑内容.那么怎么将 ...
如何将PDF文档转成Excel？
文章来源:https://www.reneelab.com.cn/how-to-convert-pdf-to-excel.html 目录一.PDF与Excel文件二.PDF转Excel的方法 1. ...
java将office文档,word,ppt,pdf文档转换成swf文件在线预览
java将office文档pdf文档转换成swf文件在线预览第一步,安装openoffice.org openoffice.org是一套sun的开源office办公套件,能在widows,linux ...

使用JS将PDF文档转成图片，一页文档对应一张图片，并支持将图片批量导出！

使用JS将PDF文档转成图片，一页文档对应一张图片，并支持将图片批量导出！相关推荐

最新文章

热门文章