环境
vue-pdf 4.0.6vue 2.x
前言
上传一般的普通
效果对比
- 修改前效果
- 修改后正常效果
解决方法
1. 首先查看控制台报错信息
Warning: TT: undefined function: 3
pdf.js:468 Warning: Error during font loading: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.
pdf.js:468 Warning: Error during font loading: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.
2.分析是因为缺少中文字体造成的
查看本地项目字体所在路径
node_modules/pdfjs-dist/cmaps
3. 解决中文字体不显示问题
- 核心代码(
temporary fix)
computed: {
pdfSrc(){
//处理pdfUrl返回
let src = pdf.createLoadingTask({
url: this.pdfUrl,
//引入pdf.js字体，templ
cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/',
cMapPacked: true
})
return src ;
}
//省略其它
}
- 组件使用
<pdf
:src="pdfSrc"
:page="currentPage"
ref="pdf"
@num-pages="pageCount=$event"
@page-loaded="currentPage=$event"
@loaded="loadPdfHandler"
></pdf>
Tips：
这里引用
cdn的字体，没有使用本地的。
到这里就成功解决了预览pdf不显示的问题 >_<,效果见上图。