需求来源
预览简历功能在移动端,由于用了一层iframe把这个功能嵌套在了app端,再用一个iframe来预览,只有ios能看到,安卓就不支持,查了很多资料和插件,原理基本上都是用iframe实现的。最终转换思路,将pdf下载转为图片然后绘制到canvans中也是一样的效果。
实现步骤
先安装pdfjs插件,插件开源免费
官网:
https://github.com/mozilla/pdf.js
在vue或react项目中使用
https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website
npm install pdfjs-dist --save
:
上面几步完成后就完成80%了,剩下的就是把图片绘制到canvans了
这里我直接贴源码了,注意一点,官方的示例中没有import 'pdfjs-dist/build/pdf.worker.mjs'; 这一段导入,会有一个报错
gihub上有解释
https://github.com/mozilla/pdf.js/issues/10478
最终效果:
问题
跨域
我直接放入设置了跨域的链接到url是可以直接得到pdf的,但是目前这个跨域问题,后台说是有设置跨域,但是我请求有跨域,我在前端配置了跨域也还是不行。多番尝试后这个问题还是没有解决。由于时间紧迫,所以采用备用方案:后台在接口返回了pdf的base64格式,pdfjs官方案例中说需要将base64转为二进制数据就可以加载。
https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld64.html