实现图
实现方案：
通过 web-view 外接h5界面实现
<web-view src="https://test.XXX.XXX.com/index.php/PdfH5EZ/pdfH5">
</web-view>
需要在小程序开发管理 添加业务域名
从小程序接收H5端传回的参数 options
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
orderId:options.id
})
console.log("pages/contract_detail/index",options)
let from_page = options.from_page; // 来源页面
if (from_page == "order_detail") { // 订单详情
this.getPdfInfo(1);
} else if (from_page == "contract_procurement") { // 合同列表
this.getPdfInfo(2);
} else if (from_page == "web_h5") { // web_wiew
let type = options.type; // type 0返回订单 1签署
if (type == 0) {
wx.navigateTo({
url: '../index/index'
})
} else if (type == 1) {
this.setOrder(options);
} else {
console.log("type 参数异常");
}
}
},
代码更新跳转回小程序方法以及从小程序端进入获取参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>电子合同</title>
<link rel="stylesheet" href="__PUBLIC__/pdfH5/css/style.css" />
<link rel="stylesheet" href="__PUBLIC__/pdfH5/css/pdfh5.css" />
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<!-- <link href="https://www.gjtool.cn/download/pdfh5.png" type="image/x-icon" rel="shortcut icon" />-->
<meta charset="utf-8">
<style>
body,
html {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
#demo {
display: none;
height: 90%;
}
#canvas-btn {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
/*padding: 0.13rem;*/
}
#clear_btn {
width: 30%;
margin: auto;
text-align: center;
line-height: 1rem;
margin-top: 0.27rem;
color: #fff;
border-radius: 1.31rem;
clear: both;
border-radius: 8px 8px 8px 8px;
opacity: 1;
border: 1px solid #999999;
font-weight: 500;
color: #999999;
}
#save_btn {
width: 45%;
background: #4cd964;
margin: auto;
text-align: center;
line-height: 1rem;
margin-top: 0.27rem;
color: #fff;
border-radius: 1.31rem;
clear: both;
background: #15C176;
border-radius: 8px 8px 8px 8px;
opacity: 1;
}
#showToastWraper {
position: fixed;
z-index: 999;
top: 35%;
right: 0;
left: 0;
width: 90%;
margin: auto;
background: rgba(0, 0, 0, 0.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
text-align: center;
padding: 10px 20px;
color: #dcdcdc;
border-radius: 50px;
}
#pwd {
position: fixed;
top: 100px;
width: 100%;
height: 50px;
}
#pwd input {
width: 100%;
height: 50px;
text-indent: 1em;
}
/* 输入弹窗show */
#input_content{
height: auto;
opacity: 1;
position: fixed;
background-color: #FFFFFF;
border-radius: 15px;
margin-top: 45%;
z-index: 1003;
display: flex;
flex-direction: column;
justify-content:flex-start;
width: 95%;
margin-left: 2%;
margin-right: 2%;
}
#input_num{
margin-top: 20px;
color: #333333;
font-size: 120%;
border: none;
border-bottom: 1px solid #f1f1f1;
line-height: 30px;
margin-left: 30px;
margin-right: 30px;
-webkit-user-select: auto !important;
outline: none;
}
</style>
</head>
<body>
<div id="app">
<div class="text-wrapper">
<div class="text part1">
<div>
<span class="letter">
<div class="character">L</div> <span></span>
</span>
<span class="letter">
<div class="character">o</div> <span></span>
</span>
<span class="letter">
<div class="character">a</div> <span></span>
</span>
<span class="letter">
<div class="character">d</div> <span></span>
</span>
<span class="letter">
<div class="character">i</div> <span></span>
</span>
<span class="letter">
<div class="character">n</div> <span></span>
</span>
<span class="letter">
<div class="character">g</div> <span></span>
</span>
</div>
</div>
<div class="how-to"><span>正在加载中，请您耐心等待...</span></div>
</div>
</div>
<!-- 输入弹窗 开始-->
<div id="screen_bg" style="background-color: black;opacity: 0.4;top: 0;margin: 0;padding: 0;width: 100%;height: 100%;position: absolute;z-index: 1001;" onclick="handleHideScreen"></div>
<div id="input_content" >
<span style="color: #333333;font-size: 130%;margin-left: 30px;margin-top: 30px;display: inline-block;line-height: 30px;">请输入签署密码</span>
<input type="password" id="input_num"/>
<div style="display: flex;justify-content: flex-end;align-items: center;margin-top: 20px;margin-bottom: 20px;">
<button style="font-size: 110%;background-color: #FFFFFF;color: #FF3939;width: 30%;text-align: center;border: none;line-height: 40px;" onclick="handleHideInp(0)">取消</button>
<button style="font-size: 110%;background-color: #FFFFFF;color: #FF3939;width: 30%;text-align: center;border: none;line-height: 40px;" onclick="handleHideInp(1)">确认</button>
</div>
</div>
<!-- 输入弹窗 完成-->
<div id="demo"></div>
<!-- <canvas id='canvas'></canvas>-->
<div id="canvas-btn">
<div id="clear_btn" onclick="SendMsg(0)" class="op_btn">返回订单</div>
<div id="save_btn" onclick="SendMsg(1)" class="save_btn">签署合同</div>
<!--<div id="pwd" class="save_btn"><input type="text" placeholder="请输入签署密码" name="pwd"></div>-->
<div class="cleaerfix"></div>
</div>
<!-- pdf的js -->
<script src="__PUBLIC__/pdfH5/js/pdf.js"></script>
<script src="__PUBLIC__/pdfH5/js/pdf.worker.js"></script>
<script src="__PUBLIC__/pdfH5/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__PUBLIC__/pdfH5/js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
<!-- 签名的js -->
<script type="text/javascript" src="__PUBLIC__/pdfH5/js/flexible.debug.js"></script>
<script type="text/javascript" src="__PUBLIC__/pdfH5/js/zepto.js"></script>
<script type="text/javascript" src="__PUBLIC__/pdfH5/js/touch.js"></script>
<script type="text/javascript" src="__PUBLIC__/pdfH5/js/flexible.debug.js"></script>
<script type="text/javascript" src="__PUBLIC__/pdfH5/js/flexible_css.debug.js"></script>
<script type="text/javascript">
var pdfh5;
var order_id = 0;
$(function () {
order_id = getQueryVariable("order_id"); // 当前订单号
$("#app").remove()
$("#demo").show()
$("#input_content").hide();
$("#screen_bg").hide();
var pdfUrl = getQueryVariable("pdf");
var type = getQueryVariable("type"); // 小程序传过来的当前页面展示方式 1带签署按钮 2仅pdf
if (type ==2 ) {
$("#demo").css("height","100%");
$("#canvas-btn").css("display","none");
$("title").text("查看电子合同");
}
let URL_de = decodeURIComponent(pdfUrl);
var query = window.location.search.substring(1);
var url = query.split("=")[1]; //通过路由获取pdf文件线上地址
pdfh5 = new Pdfh5('#demo', {
pdfurl: URL_de
});
//pdf准备开始渲染，此时可以拿到pdf总页数
pdfh5.on("ready", function () {
console.log("pdf准备开始渲染，总页数：" + this.totalNum)
})
//监听pdf渲染成功
pdfh5.on("success", function (time) {
time = time / 1000
console.log("pdf渲染完成，总耗时" + time + "秒")
})
})
</script>
<script>
//是否已签名
var isSign = false
//是否已提交签名
var haveSign = false
//获取页面尺寸
var canvasWidth = document.body.clientWidth;
var canvasHeight = canvasWidth;
//声明canvas
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//设置canvas尺寸
canvas.width = canvasWidth * 0.98;
canvas.height = canvasHeight * 0.45;
//画笔颜色
var strokeColor = "#000";
//鼠标
isMouseDown = false;
//上一次绘制的的坐标
var lastLoc = { x: 0, y: 0 };
//初始记录事件
var lastTimestamp = 0;
//上一次线条宽度
var lastLineWidth = -1;
//var
var maxV = 10;
var minV = 0.1;
var maxLineWidth = 5;
var minLineWidth = 1;
//点击色块切换画笔颜色
$(".colorBtn").on("click", function (e) {
$(".colorBtn").removeClass('colorBtnBorder');
$(this).addClass("colorBtnBorder");
strokeColor = $(this).css("");
})
function handleHideScreen(){
$("#input_content").hide();
$("#screen_bg").hide();
}
// 获取url- get参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}
// 弹窗提示
function showToast(text, width, radius) {
var widthDiv = width ? width : '50%';//自定义宽度
var radiusDiv = radius ? radius : '50px';//自定义边框角度
//此处你还可以定义 位置、文字颜色大小、背景色、显示时长等等
var showToastDiv = "<div id='showToastWraper'></div>";
var showToastWraper = $("#showToastWraper");
var isExat = showToastWraper.length;
if (!isExat) {
//第一次创建元素 并且设置元素把显示状态的停止掉、渐隐显示、显示文本内容、设置自定义样式、1.5s后渐隐消失
$(document.body).append(showToastDiv);
$("#showToastWraper").stop().fadeIn(300).html(text).css({ width: widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
} else {
//第二次 就不需要创建元素了减少dom操作
showToastWraper.stop().fadeIn(300).html(text).css({ width: widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
}
}
/** 输入数量弹窗关闭 */
function handleHideInp(num){
if(num==1){
// 获取当前input值
var inp_pwd = $("#input_num").val();
if(!inp_pwd) {
showToast("请输入签署密码");
} else {
wx.miniProgram.navigateTo({
url: "/pages/contract_detail/index?order_id=" + order_id+"&type="+num+"&from_page=web_h5&pwd="+inp_pwd,
});
}
}
$("#input_content").hide();
$("#screen_bg").hide();
}
// 签署合同或返回订单首页 type 0返回订单 1签署
function SendMsg(type){
if(type == 0) {
wx.miniProgram.navigateBack({
delta: 1
})
} else if(type == 1) {
$("#input_content").show();
$("#screen_bg").show();
} else {
alert("参数类型错误: type");
}
return;
/*$.ajax({
url: "https://xxxx.xxx.xxxx.com/index.php/WXApi/WXLogin/sendMsg", //假设这是pdf文件流的请求接口
type: "post",
data: {},
success: function (res) {
console.log(res)
showToast('发送成功');
}
});*/
}
// 将canvas转换成画布
function canvasToImage(canvas) {
// var image = new Image();
// image.src = canvas.toDataURL("image/png");
// return image;
return canvas.toDataURL("image/png");
}
//获取canvas 坐标 x，y 分别代表相对window内的xy
function windowToCanvas(x, y) {
//canvas提供的方法返回canvas 距 他外围包围盒子的距离left,top值
var bbox = canvas.getBoundingClientRect();
//返回的就是canvas 内的坐标值
return { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) }
}
//封装 事件
function beginStroke(point) {
isMouseDown = true;
//第一次用户画的坐标初始值
lastLoc = windowToCanvas(point.x, point.y);
//获取首次点击鼠标 事件戳
lastTimestamp = new Date().getTime();
}
function endStroke() {
isMouseDown = false;
}
function moveStroke(point) {
//开始绘制直线
var curLoc = windowToCanvas(point.x, point.y);
//路程
var s = calcDistance(curLoc, lastLoc);
//结束时间
var curTimestamp = new Date().getTime();
//时间差
var t = curTimestamp - lastTimestamp;
//绘制线条粗细
var lineWidth = calcLineWidth(t, s);
//绘制
context.beginPath();
context.moveTo(lastLoc.x, lastLoc.y);
context.lineTo(curLoc.x, curLoc.y);
context.strokeStyle = strokeColor;
context.lineWidth = lineWidth;
context.lineCap = "round";
context.lineJoin = "round";
context.stroke();
//给lastLoc赋值维护
lastLoc = curLoc;
//时间更新
lastTimestamp = curTimestamp;
lastLineWidth = lineWidth;
}
//pc鼠标事件
canvas.onmousedown = function (e) {
e.preventDefault();
beginStroke({ x: e.clientX, y: e.clientY });
}
canvas.onmouseup = function (e) {
e.preventDefault();
endStroke();
}
canvas.onmouseout = function (e) {
e.preventDefault();
endStroke();
isSign = true
}
canvas.onmousemove = function (e) {
e.preventDefault();
if (isMouseDown) {
moveStroke({ x: e.clientX, y: e.clientY });
}
}
//移动端
canvas.addEventListener("touchstart", function (e) {
e.preventDefault();
touch = e.touches[0]; //限制一根手指触碰屏幕
beginStroke({ x: touch.pageX, y: touch.pageY });
});
canvas.addEventListener("touchend", function (e) {
e.preventDefault();
endStroke();
isSign = true
});
canvas.addEventListener("touchmove", function (e) {
e.preventDefault();
if (isMouseDown) {
touch = e.touches[0];
moveStroke({ x: touch.pageX, y: touch.pageY });
}
});
//速度 = 路程 / 时间 用来计算书写速度来改变线条粗细
function calcDistance(loc1, loc2) {
//返回 数的平方根
return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2.y));
}
//线条宽度
function calcLineWidth(t, s) {
var v = s / t;
var resultLineWidth;
if (v <= minV) {
resultLineWidth = maxLineWidth;
} else if (v >= maxV) {
resultLineWidth = minLineWidth;
} else {
resultLineWidth = maxLineWidth - (v - minV) / (maxV - minV) * (maxLineWidth - minLineWidth);
}
if (lastLineWidth == -1) {
return resultLineWidth;
} else {
return lastLineWidth * 2 / 3 + resultLineWidth * 1 / 3;
}
}
</script>
</body>
</html>
gitee.com代码存放地址
参考作者地址
本文来自博客园，作者：depressiom，转载请注明原文链接：https://www.cnblogs.com/depressiom/p/17486243.html
