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

记录一下小程序在线预览PDF，以及实现电子签字，已将两者集成在一起了
链接：https://pan.baidu.com/s/17spFFwcKU3GREa27bRQrMg
提取码：h0o4

1、电子签约使用的jq插件，附上下载链接
防止无法下载，提供一个网盘下载
链接：https://pan.baidu.com/s/15RRj16pWTIFtKM87Kb5iRQ
提取码：qmo0
2、PDF预览使用的pdf.js,官网下载链接
官网下载的文件太大了，而且很多文件用不上，我原本在网上找了一个文件稍微少一点的，但是现在地址找不到了，我自己放网盘吧
链接：https://pan.baidu.com/s/1y8ydI8hYIXatUHdLktBrmA
提取码：xa43

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

> export default { data() { return { url: '', }; }, onLoad(params){ let {url} = params; let {status} = params; this.url =`https://xxx.xxx.xxx/hybrid/pdf.html?url=${url}&status=${status}`; console.log(this.url); }, methods:{ getMessage(e) { let data = https://www.it610.com/article/e.detail.data; console.log(JSON.stringify(data)); } }, onBackPress(){} } >

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' })

备注：因为结合了电子签字，所以参数需要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，最底下有具体介绍

在线签约 - 锐客网 > html,body { width: 100%; height: 100%; } .signature-box{ position: fixed; bottom: 0; width: 96%; height: 250px; margin: 0 8px; z-index: 999; display: none; } .signature-btn-box button{ line-height: 50px; height: 50px; width: 50%; text-align: center; font-weight: bold; color: white; border: unset; } #clearBtn{ background: orange; border-color: orange; } #saveBtn{ background: #999999; border-color: #999999; position: absolute; right: 0; } .can-save{ background: #007AFF !important; border-color: #007AFF !important; } .js-signature{ height: 200px; width: 100%; box-shadow: darkgrey 0px 1px 3px 0px; } #pdf-view{ position: fixed; /*bottom: 250px; */ } src="https://www.it610.com/article/html/pdf/pdf.js"> src="https://www.it610.com/article/html/pdf/pdf.worker.js"> src="https://www.it610.com/article/html/pdf/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"> src="https://www.it610.com/article/html/pdf/pdfh5.js" type="text/javascript" charset="utf-8">src="https://www.it610.com/article/signature/js/jq-signature.min.js" type="text/javascript" charset="utf-8">type="text/javascript" src="http://img.readke.com/220528/0626421600-8.jpg">type="text/javascript" src="http://img.readke.com/220528/0626423192-9.jpg"> type="text/javascript"> var pdfh5; var openId; $(function() { $("#pdf-view").show() var url = getQuery('url'); pdfh5 = new Pdfh5('#pdf-view', { pdfurl: url, // background:{ //image:"url('pdfh5.png')", //repeat:"no-repeat", //position:"left top", //size:"40px 40px" // }, URIenable:true //开启浏览器地址栏file参数获取 }); //pdf准备开始渲染，此时可以拿到pdf总页数 pdfh5.on("ready", function() { console.log("pdf准备开始渲染，总页数：" + this.totalNum) }) //监听pdf渲染成功 pdfh5.on("success", function(time) { time = time / 1000 console.log("pdf渲染完成，总耗时" + time + "秒"); }) })$(document).on('ready', function() { var status = getQuery('status'); openId = getQuery('openId'); // 根据签约状态判断是否显示签约框 0：未签约（显示）1：已签约（不显示） if(status == '0'){ $(".signature-box").show(); }else{ $(".signature-box").hide(); } // 初始化电子签字画布 if ($('.js-signature').length) { $('.js-signature').jqSignature(); } }); // 准备uni-app 环境，待触发 UniAppJSBridgeReady 事件后，即可调用 uni 的 API。 // https://uniapp.dcloud.io/component/web-view document.addEventListener('UniAppJSBridgeReady', function() { uni.getEnv(function(res) { console.log('当前环境：' + JSON.stringify(res)); }); // document.querySelector('#suc-back').addEventListener('click', function(evt) { uni.navigateBack(); uni.postMessage({ data: { msg: '签名成功' } }); }); }); // 清除画布内容，重新渲染 function clearCanvas() { $('.js-signature').jqSignature('clearCanvas'); $('#saveBtn').attr('disabled', true); $('#saveBtn').removeClass("can-save"); } // 保存签字图片并上传到服务器 function saveSignature() { var dataUrl = $('.js-signature').jqSignature('getDataURL'); let file = base64ToFile(dataUrl,'signature.png'); // 因为有文件，所以使用formData var formdata = https://www.it610.com/article/new FormData(); formdata.append("openId",openId); formdata.append("signature",file); $.ajax({ type: "POST", url: "https://xxx.xxx.xxx.xxx",// 替换成自己的接口地址 contentType: false,// 解决ajax上传文件失败问题 processData: false,// 解决ajax上传文件失败问题 data: formdata, success: function(res){ if(res.code == "100"){ // 触发web-view 返回上一页 $("#suc-back").click(); clearCanvas(); }else{ alert("签名失败，请稍后再试"); } }, error: function(err) { alert("签名失败，请稍后再试"); } }) } $('.js-signature').on('jq.signature.changed', function() { $('#saveBtn').attr('disabled', false); $('#saveBtn').addClass("can-save"); }); function getQuery(name) { // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在） let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); let r = window.location.search.substr(1).match(reg); if(r != null) { // 对参数值进行解码 return decodeURIComponent(r[2]); } return null; } //将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png） function base64ToFile(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?); /)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, {type:mime}); }

3、整体效果

文章图片

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

【uni-app 小程序使用 web-view实现在线预览dpf，及H5电子签字】附一个uni-app 小程序实现电子签字，写的很好，可以直接拿去用
https://blog.csdn.net/qq_32289849/article/details/106571184
https://ext.dcloud.net.cn/plugin?id=1806