[ PDFJS实现PDF转JPG,PNG ]

一、问题

1 ) . 用户上传文档后，怎么将文档展示在页面供用户浏览！
2 ) . 是否可以直接利用JS在前端完成，这样省去了后端处理，提供URL再让用户下载的麻烦！
3 ) . 假如直接利用JS实现该功能，处于安全策略，JS是不能直接打开本地文件！

二、实现

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

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

2 ) . 但是我们这里需要的是将PDF转化成图片或者canvas，这就不得不说PDF.js了，PDF.js可以将PDF文档转换成canvas实现预览，有了canvas，我们就有了图片。

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

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

var a = $("<a>").attr("href", "http://***").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实现本地文件的打开，具体的实现方法可自行搜索或参考项目中的解决方案。

传送门：https://github.com/Jensonhui/pdf-to-image

Javascript — Aug 4, 2018