外贸seo网站推广,如何做强企业网站,空间域名主机网站模板,网页设计期末作品素材需求来源
预览简历功能在移动端#xff0c;由于用了一层iframe把这个功能嵌套在了app端#xff0c;再用一个iframe来预览#xff0c;只有ios能看到#xff0c;安卓就不支持#xff0c;查了很多资料和插件#xff0c;原理基本上都是用iframe实现的。最终转换思路#xf…需求来源
预览简历功能在移动端由于用了一层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
templatediv refshowpdfRef/div
/templatescript setup
import { ref } from vue;
import { getDocument } from pdfjs-dist/legacy/build/pdf.mjs;
import pdfjs-dist/build/pdf.worker.mjs;const showpdfRef ref(null);const pdfPath xxxxxxxxconst loadingTask getDocument(pdfPath);
loadingTask.promise.then(async (pdf) {const canvas document.createElement(canvas);const context canvas.getContext(2d);// 循环遍历每一页pdf将其转成图片for (let i 1; i pdf._pdfInfo.numPages; i) {// 获取pdf页const page await pdf.getPage(i);// 获取页的尺寸const viewport page.getViewport({ scale: 1 });// 设置canvas的尺寸canvas.width viewport.width;canvas.height viewport.height;// 将pdf页渲染到canvas上await page.render({ canvasContext: context, viewport: viewport }).promise;// 将canvas转成图片并添加到页面上const img document.createElement(img);img.src canvas.toDataURL(image/png);showpdfRef.value.appendChild(img);}}).then(function () {console.log(# End of Document);},function (err) {console.error(Error: err);},);
/scriptstyle scoped/style
最终效果
问题
跨域 我直接放入设置了跨域的链接到url是可以直接得到pdf的但是目前这个跨域问题后台说是有设置跨域但是我请求有跨域我在前端配置了跨域也还是不行。多番尝试后这个问题还是没有解决。由于时间紧迫所以采用备用方案后台在接口返回了pdf的base64格式pdfjs官方案例中说需要将base64转为二进制数据就可以加载。 https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld64.html
