vue之vue-pdf预览pdf内容文字丢失问题

环境

vue-pdf 4.0.6 vue 2.x

前言

上传一般的普通pdf正常预览，但是上传带有红头文件的和和特殊字体的pdf无法正常内容显示，文字丢失问题。

效果对比

修改前效果 修改后正常效果

解决方法

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不显示的问题 >_<,效果见上图。