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