起因就是公司要做个pdf文件上传+预览+导出功能
,所以想使用vue-pdf
插件实现,但是发现vue-pdf
插件最大的问题是第一次预览文件正常,但是第二次预览打开空白。下面记录一下使用期间发生的各种问题:
1、中文 / 印章不显示问题(我这边是中文丢失)
这种问题很好解决,引入中文包依赖就可以了。
import pdf from "vue-pdf";
computed: {
//解决预览pdf文字丢失Warning: Error during font loading: The CMap “baseUrl“ parameter must be specifie的问题
trafficPolicySrc() {
//处理pdfUrl返回
let src = pdf.createLoadingTask({
url: this.policyForm.compulsoryInsurance,
cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",
});
return src;
},
},
2、打开预览时第一次正常,第二次打开预览就会显示为空白问题(不需要贴图了)
这个问题我试了网上说的什么返回地址为空获取不到,缓存什么的,还有修改node_modules
文件打小补丁的,我是个菜鸟所以不敢随便整这些,所以就想着换一个插件,看有人推荐vue-pdf-signature
插件,我就毫不犹豫的使用了,使用之后发现一切都很完美,但是使用jenkins自动化部署时一直报错:
【
package.json
文件我都是下载的"pdfjs-dist": "^2.5.207"
2.5版本的pdfjs-dist
因为只有这个版本下才有es5
这个文件包,不然运行会报错。】
import pdf from "vue-pdf-signature";
import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js";
computed: {
trafficPolicySrc() {
//处理pdfUrl返回
let src = pdf.createLoadingTask({
url: this.policyForm.compulsoryInsurance,
CMapReaderFactory
});
return src;
},
},
事情发展到这里就很离谱,明明我安装了"pdfjs-dist": "^2.5.207"
,但是部署一直报错,所以就没办法提交测试,就想着再换一个插件:vue-pdf-embed
因为我们使用的是vue2
,所以要下载npm install vue-pdf-embed@1
一版本的
<vue-pdf-embed :source="policyForm.invoicePdfUrl" />
import VuePdfEmbed from "vue-pdf-embed/dist/vue2-pdf-embed";
components: {
VuePdfEmbed
},
这个插件就完美解决预览第二次显示空白问题。【但是这样依然不显示中文,但是对我来说不重要,所以我就没整中文的事情了,因为我点击打开
ifram
查看文件,所以有没有中文不太重要!】
如果有知道如何解决部署一直报错找不到 pdfjs-dist 问题的,跪求评论告知,还有 VuePdfEmbed 中文显示问题也可评论留言,跪求!