环境


  • ​​vue-pdf 4.0.6​​
  • ​​vue 2.x​​

前言


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


效果对比


  • 修改前效果
    vue之vue-pdf预览pdf内容文字丢失问题_vue
  • 修改后正常效果
    vue之vue-pdf预览pdf内容文字丢失问题_vue_02

解决方法

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.

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

2.分析是因为缺少中文字体造成的

查看本地项目字体所在路径

node_modules/pdfjs-dist/cmaps

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

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

参考链接