记录一下小程序在线预览PDF，以及实现电子签字，已将两者集成在一起了
链接：https://pan.baidu.com/s/17spFFwcKU3GREa27bRQrMg
提取码：h0o4
1、电子签约使用的jq插件，附上下载链接1、在线预览pdf
防止无法下载，提供一个网盘下载
链接：https://pan.baidu.com/s/15RRj16pWTIFtKM87Kb5iRQ
提取码：qmo0
2、PDF预览使用的pdf.js,官网下载链接
官网下载的文件太大了，而且很多文件用不上，我原本在网上找了一个文件稍微少一点的，但是现在地址找不到了，我自己放网盘吧
链接：https://pan.baidu.com/s/1y8ydI8hYIXatUHdLktBrmA
提取码：xa43
注意：1、将下载好的PDF插件放置服务器（服务器地址：https://xxx.xxx.xxx）
- 小程序仅支持加载网络网页，不支持本地html
- App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下（自行参考其他）
例：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
推荐阅读
- 奇思妙想（小程序wxapkg包一键运行至浏览器（））
- 微信小程序的电子书阅读软件的设计 小说小程序 小程序毕业设计课题选题项目 毕设作品毕业设计论文
- 微信小程序|微信小程序基础学习（WXML）
- 小程序知识|微信小程序js.json.wxss.wxml后缀文件的区别及使用方法
- 微信小程序|分享一个微信小程序编辑页面的WXML模板
- 原来搭建淘客项目如此简单，appweb小程序轻松搞定
- 前端|前端 折叠面板 折叠展开动画
- [C语言小白]三子棋小程序
- IPC之消息队列·即时通讯小程序