当前位置:首页 > 科技 > 正文

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

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

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

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

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

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

1、在线预览pdf

注意:

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

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

1、将下载好的PDF插件放置服务器(服务器地址:)

例:

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

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

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

://.xxx//demo.pdf&=0

例:

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

uni.({

url:'..//?url='

})

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

预览效果

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 小程序实现电子签字,写的很好,可以直接拿去用

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

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

原文链接:

有话要说...

取消
扫码支持 支付码