JS逐页转pdf文件为图片格式

背景

年前的时候，开发一个电子杂志项目，功能需求是通过上传pdf文件，将其转为图片格式，所以杂志的内容其实就是一张张图片

不过当时技术要求用后端实现，所以使用的是PHP实现该功能。项目完成后，寻思着在前端是否也能实现pdf转图片的功能。一番研究后，果真可行。以下就分享如何通过前端js将pdf文件转为图片格式，并且支持翻页预览、以及图片打包下载

效果预览

所需工具

1. pdf.js（负责API解析，可将pdf文件渲染成canvas实现预览）
2. pdf.worker.js（负责核心解析）
3. jszip.js（将图片打包成生成.zip文件）
4. 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文件
    
  

  

    页码：
    文件名：
    文件大小：
  

  

    

    
  

项目实现原理分析

1. 首先利用pdf.js将上传的pdf文件转化成canvas
2. 然后使用jszip.js将canvas打包图片生成.zip文件
3. 最后使用Filesaver.js将zip文件保存下载

项目注意要点

1. 由于pdf文件是通过上传的，因此需要通过js的FileReader()对象将其读取为DataURL，pdf.js文件才可读取渲染
2. JSZip对象的.file()函数中第二个参数传入的是base64格式图片，但是要去掉base64前缀标识

最后

觉得文章不错的，请点个赞哇！
文章首发于微信公众号：GitWeb，欢迎关注学习技术讨论交流。
微信交流群：公众号内加好友，拉你入群

欢迎关注