解决vue-pdf的签章不显示问题记录

 更新时间:2024年11月23日 11:36:45   作者:join8  
文章介绍了使用vue-pdf@4.3.0时遇到的上传特殊PDF文件无法正常预览的问题,通过查看控制台报错信息,发现是因为缺少字体导致的,解决方法是修改pdfjs-dist库的代码,注释掉隐藏电子签章的代码,为了在生产环境中应用这个修改,使用了patch-package插件,感兴趣的朋友一起看看吧

在使用vue-pdf @4.3.0时发现上传一般的普通pdf正常预览,但是上传带有红头文件的和和特殊字体的pdf无法正常内容显示,文字丢失问题。

1、查看控制台报错信息

2、缺少字体原因

    getNumPages(url) {
      var loadingTask = pdf.createLoadingTask({
         url: url,
         //引入pdf.js字体
         cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.8.69/cmaps/',
         cMapPacked: true
      });
      this.url = loadingTask;
      loadingTask.promise.then((res) => {
        this.numPages = res.numPages;
      })
    }

3、vue-pdf 是依赖于 pdfjs-dist 库的,而它依赖的pdfjs-dist库的版本不支持显示签章

在 node_modules/pdfjs-dist/es5/build/pdf.worker.js 发现有这么一段代码:

if (data.fieldType === 'Sig') {
  data.fieldValue = null;
 // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
}

其中 _this3.setFlags(_util.AnnotationFlag.HIDDEN)就是隐藏电子签章,注释这段代码去修复这个问题了。

4、生产环境同步去修改,用到另一个插件 patch-package 

它的作用就是打补丁, 当某些模块有bug的时候, 先在依赖包修改,在执行以下命令

npm install patch-package
npx patch-package pdfjs-dist

执行后会在项目根目录生成patches文件

同时你也要在 package.json 的脚本scripts中添加 

"scripts": {
    ...
    "postinstall": "patch-package"
 },

后续执行 npm install 时,会自动为依赖包打补丁

5、worker-loader 的默认打包路径是在 dist 根目录下,为了统一我们想把它打包到 dist/static/js 目录下,我们依旧通过更改源码的方式是设置路径。

找到 node_modules/worker-loader/dist/index.js 文件,然后把:

const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {
    context: options.context || this.rootContext || this.options.context,
    regExp: options.regExp
});

改为我们想要的路径

const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', {
  context: options.context || this.rootContext || this.options.context,
  regExp: options.regExp
});

最后,再运行 npx patch-package worker-loader,生成worker-loader+2.0.0.patch补丁包

到此这篇关于解决vue-pdf的签章不显示问题的文章就介绍到这了,更多相关vue-pdf签章不显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue Router组合布局用法详解

    Vue Router组合布局用法详解

    今天我们用一种新的布局方式,使用路由视图来实现布局样式,本文将给大家介绍如何使用Vue Router组合布局,文中有详细的代码示例供大家参考,感兴趣的同学可以跟着小编一起学习
    2023-05-05
  • vue中动态参数与计算属性的使用方法

    vue中动态参数与计算属性的使用方法

    在平时vue开发中,我们经常会用到计算属性(计算属性只有在它的相关依赖发生改变时才会重新求值)来计算我们需要的数据,下面这篇文章主要给大家介绍了关于vue中动态参数与计算属性使用的相关资料,需要的朋友可以参考下
    2021-08-08
  • Vue.js+Layer表格数据绑定与实现更新的实例

    Vue.js+Layer表格数据绑定与实现更新的实例

    下面小编就为大家分享一篇Vue.js+Layer表格数据绑定与实现更新的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue使用H5的audio标签问题

    vue使用H5的audio标签问题

    这篇文章主要介绍了vue使用H5的audio标签问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue之监听方法案例详解

    Vue之监听方法案例详解

    这篇文章主要介绍了Vue之监听方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • Vue单文件组件开发实现过程详解

    Vue单文件组件开发实现过程详解

    这篇文章主要介绍了Vue单文件组件开发实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 详解vuejs之v-for列表渲染

    详解vuejs之v-for列表渲染

    这篇文章主要介绍了详解vuejs之v-for列表渲染,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue3.0-props、computed、自定义事件方式

    vue3.0-props、computed、自定义事件方式

    这篇文章主要介绍了vue3.0-props、computed、自定义事件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue router中mode history、base的作用说明

    vue router中mode history、base的作用说明

    这篇文章主要介绍了vue router中mode history、base的作用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue实现滚动条到顶部或者到指定位置

    vue实现滚动条到顶部或者到指定位置

    这篇文章主要介绍了vue实现滚动条到顶部或者到指定位置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论