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

参考链接

• https://github.com/FranckFreiburger/vue-pdf/issues/229

• https://github.com/Hanpeng-Chen/hampton-demo-repo/blob/master/example-project/src/pages/pdfjs-demo.vue

• vue-pdf解决显示无法显示中文、中文打印预览乱码