https://www.jianshu.com/p/07943cbf2ecf
背景
年前的时候，开发一个电子杂志项目，功能需求是通过上传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.js将上传的pdf文件转化成canvas
然后使用jszip.js将canvas打包图片生成.zip文件
最后使用Filesaver.js将zip文件保存下载
项目注意要点
由于pdf文件是通过上传的，因此需要通过js的FileReader()对象将其读取为DataURL，pdf.js文件才可读取渲染
JSZip对象的.file()函数中第二个参数传入的是base64格式图片，但是要去掉base64前缀标识
最后
觉得文章不错的，请点个赞哇！
文章首发于微信公众号：GitWeb，欢迎关注学习技术讨论交流。
微信交流群：公众号内加好友，拉你入群
作者：代码西施
链接：https://www.jianshu.com/p/07943cbf2ecf
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。