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

背景 年前的时候，开发一个电子杂志项目，功能需求是通过上传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，欢迎关注学习技术讨论交流。 微信交流群：公众号内加好友，拉你入群 欢迎关注

本文章由javascript技术分享原创和收集