vue-pdf 在线预览pdf（pdf地址或base64pdf）解决电子签章显示问题

使用vue-pdf在线预览pdf
并使得带有电子签章的pdf能够正常预览出来

1.安装vue-pdf

npm install vue-pdf
npm install pdfjs-dist

//或者
yarn add vue-pdf
`

2.新建pdf组件

新建AppPdf.vue文件

// AppPdf.vue
<template><div><pdf v-for="i in numPages" :key="i" :page="i" :src="src"></pdf></div>
</template>
<script>import pdf from 'vue-pdf'export default {components:{pdf},props:{pdfSrc: String},data(){return {numPages: null,src: ""}},mounted() {this.getNumPages() // base64pdf 文件的预览this.getNumPages2() // pdf 文件地址的预览},methods:{// #计算pdf页码总数getNumPages() {let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'（往下面看【注意】）let perfix64 = 'data:application/pdf;base64,' + this.pdfSrc this.src = pdf.createLoadingTask({url: perfix64,withCredentials: false,cMapUrl: CMAP_URL,cMapPacked: true});this.src.promise.then(pdf => {this.numPages = pdf.numPagesconsole.log(this.numPages)}).catch(err => {console.error('pdf 加载失败', err);})},getNumPages2(){this.src = pdf.createLoadingTask({url: this.pdfSrc,withCredentials: false});this.src.promise.then(pdf => {this.numPages = pdf.numPagesconsole.log(this.numPages)}).catch(err => {console.error('pdf 加载失败', err);})}}}
</script>

3.在父组件的使用

// home.vue
//注：signInfos为从后台获取的pdf文件的json对象
<templete><el-tabs v-model="activeName" @tab-click="handleTabClick"><el-tab-pane label="合同1" name="合同1"><AppPdf :pdfSrc="signInfos.pdf1"></AppPdf></el-tab-pane><el-tab-pane label="合同2" name="合同2"><AppPdf :pdfSrc="signInfos.pdf2"></AppPdf></el-tab-pane></el-tabs>
</templete>

4.解决电子签章无法显示的问题

步骤一

在node_modules/pdfjs-dist/build/pdf.worker.js注释掉一行代码

if (data.fieldType === "Sig") {data.fieldValue = null;// 注释掉底下这行 就可以显示电子签章// this.setFlags(_util.AnnotationFlag.HIDDEN);
}

步骤二

在node_modules/pdfjs-dist/es5/build/pdf.worker.js注释掉一行代码

 if (data.fieldType === "Sig") {data.fieldValue = null;// 注释掉底下这行 就可以显示电子签章// _this3.setFlags(_util.AnnotationFlag.HIDDEN);}

最后就可以在页面中看到你想看到的pdf咯

5.注意：

在控制台会出现如下警告⚠️：

Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.

当PDF文件中有中文的情况下，在引用pdfjs过程中可能会出现中文不显示问题，在console中会提示如上错误。

主要原因是有pdf不支持的字体格式，可以通过引入pdf.js的字体来解决该问题

解决方法：

let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'（往下面看【注意】）
let perfix64 = 'data:application/pdf;base64,' + this.pdfSrc
this.src = pdf.createLoadingTask({url: perfix64,withCredentials: false,cMapUrl: CMAP_URL,cMapPacked: true});

vue-pdf 在线预览pdf（pdf地址或base64pdf）解决电子签章显示问题相关推荐

js 直接打开选择文件窗口_基于HTML5 构建的 Web端现代化PDF在线预览插件——PDF.js...
引言 PDF文件现在在许多企业中常用 - 无论您是要生成销售报告,交付合同还是发送发票,PDF都是首选的文件类型.PDF.js是由Mozilla编写的JavaScript库.由于它使用vanilla ...
pdf在线预览解决方案——pdf.js使用
业务背景在C端的前端项目中,针对用户会有多种规则需要展示,之前的处理方案是将这些规则写成一个个的静态页面,用户来访问这些页面.但如果这些规则需要变更的话,就需要前端修改对应的规则页面的文案,重新发版 ...
java web pdf 打印预览_java原装代码完成pdf在线预览和pdf打印及下载
前提准备: 1. 项目中至少需要引入的jar包,注意版本: a) core-renderer.jar b) freemarker-2.3.16.jar c) iText-2.0.8.jar d) iT ...
vue 使用 vue-pdf 实现pdf在线预览
vue 使用 vue-pdf 实现pdf在线预览 1.安装 npm install --save vue-pdf 2.引用 import pdf from 'vue-pdf' export defau ...
html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
java实现word转pdf在线预览格式
java实现word转pdf在线预览格式前段时间的项目里涉及了此功能,调研过一些方案,踩过一些坑,一一总结在此. java转pdf的方案很多,但是很多都要收费,转pdf也有一些格式方面的问题. 方案 ...
html 在线预览pdf功能,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件!javascript 翻来覆去找到两种办法 ,最后采用了jquery.media.js插 ...
HTML如何实现PDF在线预览
在浏览html页面的时候可以实现先预览文件内容再决定是否下载的功能 <html> <title>PDF在线预览</title> <body><em ...
Java实现PDF在线预览
Java实现PDF在线预览前言:之前一直PDF一直是下载后再查看,一直在想如何如何在线预览,现已找到方法,作此笔记,也希望都对其他人有所帮助代码实现 @Slf4j @Controller @Req ...