uni-app 小程序使用 web-view实现在线预览dpf，及H5电子签字

记录一下小程序在线预览PDF，以及实现电子签字，已将两者集成在一起了

链接：https://pan.baidu.com/s/17spFFwcKU3GREa27bRQrMg

1、电子签约使用的jq插件，附上下载链接

防止无法下载，提供一个网盘下载

链接：https://pan.baidu.com/s/15RRj16pWTIFtKM87Kb5iRQ

2、PDF预览使用的pdf.js,官网下载链接

官网下载的文件太大了，而且很多文件用不上，我原本在网上找了一个文件稍微少一点的，但是现在地址找不到了，我自己放网盘吧

链接：https://pan.baidu.com/s/1y8ydI8hYIXatUHdLktBrmA

1、在线预览pdf

注意：

小程序仅支持加载网络网页，不支持本地html

App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下（自行参考其他）

1、将下载好的PDF插件放置服务器（服务器地址：https://xxx.xxx.xxx）

例：https://xxx.xxx.xxx/hybrid/pdf.html

2、根据uni-app web-view官方文档 写个公共组件webView

3、访问第一步准备的web-view组件，即可在线预览PDF

也可以直接在浏览器访问，参考链接如下：

https://xxx.xxx.xxx/hybrid/pdf.html?url=https://xxx.xxx.xxx/hybrid/demo.pdf&status=0

例：

uni.navigateTo({

url:'../common/webView?url=https://xxx.xxx.xxx/demo.pdf&status=0'

})

1

2

3

备注：因为结合了电子签字，所以参数需要status，自己视情况而定

预览效果

2、预览PDF集成电子签字

1、为了方便使用，将下载的电子签字插件直接放入PDF插件文件夹，如下

2、修改pdf.html集成电子签字，直接贴代码

集成注意事项：

1、因为使用uni-app，且在签约后，需要调用uni-app 的API 跳转页面（web-view 与 H5通讯），所以引入uni-app SDK

2、因为是微信小程序，所以引入了微信小程序 JS-SDK，如果是其他的小程序，则需要引入对应的小程序JS-SDK，具体参考uni-app web-view，最底下有具体介绍

3、整体效果

问题：电子签约固定在底部，会把PDF遮挡住一部分，如果有人优化了，麻烦@我一下，我处理不好

附一个uni-app 小程序实现电子签字，写的很好，可以直接拿去用

https://blog.csdn.net/qq_32289849/article/details/106571184

https://ext.dcloud.net.cn/plugin?id=1806

————————————————

版权声明：本文为CSDN博主「abel.gong」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/zhang0609/article/details/107983830