Vue关于pdf展示问题——第三方电子签章不能正常展示

在项目开发过程中，如果我们只需要展示pdf，那么我们可以选择vue-pdf，可以查看我之前的一篇：https://blog.csdn.net/AnnaF/article/details/105866075。

问题

但是现在的需求是需要用户跟第三方进行电子签名，然后把签完名的合同展示出来，这边就存在一个问题，vue-pdf会屏蔽签名图层，导致合同缺失第三方的电子签名。

解决方案

我们这边使用的是pdfh5插件

下面展示我这边的操作步骤：

1.安装 pdfh5

npm install pdfh5

2.具体使用

<template><div id="app"><div id="demo"></div></div>
</template><script>//引入pdfh5import Pdfh5 from "pdfh5";import axios from "axios";export default {name: "pdfH5",data(){return{pdfh5:null}},mounted(){//实例化this.pdfh5 = new Pdfh5("#demo",{pdfurl: "../../static/test.pdf"});//监听完成事件this.pdfh5.on("complete",function (status,msg,time) {console.log("status=",status,"msg=",msg,"time=",time,"this.totalNum=",this.totalNum)})}}
</script>

这样你就可以展示带有第三方签名的pdf了，如果你想以流的形式请求

pdf文件流请求示例

axios.get("https://www.gjtool.cn/pdfh5/git.pdf",{responseType: 'arraybuffer'}).then(res => {console.log(res)this.pdfh5 = new Pdfh5("#demo",{data: res.data});})

以上是在vue里面使用的详细方法，具体其他框架的使用请看这个地址：https://blog.csdn.net/AnnaF/article/details/105866075。

Vue关于pdf展示问题——第三方电子签章不能正常展示相关推荐

PDF.js 不显示电子签章
build/pdf.worker.js中有这样一段代码行号: 40277 可自行根据关键字查找到此代码// Hide unsupported Widget signatures.if (data.f ...
vue-pdf 在线预览pdf（pdf地址或base64pdf）解决电子签章显示问题
使用vue-pdf在线预览pdf 并使得带有电子签章的pdf能够正常预览出来 1.安装vue-pdf ` npm install vue-pdf npm install pdfjs-dist //或者 ...
调用第三方接口，实现电子签章的功能
前言--这里是与国内某厂家XXX合作,调用第三方电子签章的接口实现主要涉及xml与java对象的互转 //这里是签章的方法 public WrapperResponse signPost(SealD ...
为什么要用电子签章？电子签章怎么用？
随着国内互联网技术及配套法制的不断成熟,电子签章被广泛的应用于企业之中.电子签章以网络环境为媒介,以数字签名.信息加密为核心,能够提升公司的工作效率,为企业实现印章管控可追溯.电子化.移动化.接下来 ...
vue里面使用pdfjs-dist+fabric实现pdf电子签章！！！
2022.9.6 一.需求最近领导提了一个新需求:仿照e签宝,实现pdf电子签章! 最终实现效果图这是做出来的效果图,当然还有很多待修改二.思路然后我就去看了下人家e签宝的操作界面,左侧是印章 ...
js实现pdf展示及电子签章
pdfSignature 介绍 js处理pdf展示.分页和电子签章等功能.功能如下图所示: 软件架构使用pdf.js展示pdf,使用fabric.js处理签章的拖动 pdf.js fabric.js ...
react集成react-pdf获取文件流预览下载pdf，展示电子签章
1.下载依赖包代码如下(示例): npm install react-pdf 2.引入依赖包代码如下(示例): import { Document, Page } from 'react-pdf' ...
java为PDF盖(签)电子签章--位置定位
1.电子签章简介电子签章,与我们所使用的数字证书一样,是用来做为身份验证的一种手段,泛指所有以电子形式存在,依附在电子文件并与其逻辑关联,可用以辨识电子文件签署者身份,保证文件的完整性,并表示签署者 ...
Flutter PDF Android 电子签章不显示问题
当我们Flutter 加载带电子签章的PDF的时候,会发现Android 页面的签章不会显示,而iOS的可以完美展示出来. 我试了很多PDF的插件都不行. 那目前只剩一个方法,那就是在展示的地方,判断 ...

Vue关于pdf展示问题——第三方电子签章不能正常展示

问题

解决方案

pdf文件流请求示例

Vue关于pdf展示问题——第三方电子签章不能正常展示相关推荐

最新文章

热门文章