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
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。