首页 > 编程语言 >微信小程序实现pdf预览，并在下方添加签署按钮

微信小程序实现pdf预览，并在下方添加签署按钮

时间：2023-06-16 18:24:35浏览次数：41  
标签：function canvas 程序实现 微信 width context var pdf

实现图

实现图

实现方案：

通过 web-view 外接h5界面实现

<web-view src="https://test.XXX.XXX.com/index.php/PdfH5EZ/pdfH5">
</web-view>

需要在小程序开发管理 添加业务域名
实现

<!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="css/style.css" />
    <link rel="stylesheet" href="css/pdfh5.css" />
    <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%;
            background: #ca4341;
            margin: auto;
            text-align: center;
            line-height: 1rem;
            margin-top: 0.27rem;
            color: #fff;
            border-radius: 1.31rem;
            clear: both;
        }

        #save_btn {
            width: 30%;
            background: #4cd964;
            margin: auto;
            text-align: center;
            line-height: 1rem;
            margin-top: 0.27rem;
            color: #fff;
            border-radius: 1.31rem;
            clear: both;
        }
        #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;
        }
    </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="demo"></div>
<!--    <canvas id='canvas'></canvas>-->
    <div id="canvas-btn">
        <div id="clear_btn" class="op_btn">返回订单</div>
        <div id="save_btn" onclick="SendMsg()" class="save_btn">签署合同</div>
        <div class="cleaerfix"></div>
    </div>
    <!-- pdf的js -->
    <script src="js/pdf.js"></script>
    <script src="js/pdf.worker.js"></script>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
    <!-- 签名的js -->
    <script type="text/javascript" src="js/flexible.debug.js"></script>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/touch.js"></script>
    <script type="text/javascript" src="js/flexible.debug.js"></script>
    <script type="text/javascript" src="js/flexible_css.debug.js"></script>
    <script type="text/javascript">
        var pdfh5;
        $(function () {
            $("#app").remove()
            $("#demo").show()
            var query = window.location.search.substring(1);
            var url = query.split("=")[1];  //通过路由获取pdf文件线上地址
            console.log('url??',url)
            pdfh5 = new Pdfh5('#demo', {
                //'https://feiyunphoneapp.oss-cn-shenzhen.aliyuncs.com/esign/esignfile/d4060a627c79489b85a4ca362f9870f5.pdf'
                pdfurl: 'https://feiyunphoneapp.oss-cn-shenzhen.aliyuncs.com/esign/esignfile/d4060a627c79489b85a4ca362f9870f5.pdf',
                // pdfurl: url,  //pdf线上地址
                // ,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 + "秒")
            })

        })
    </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("");
        })
        //清除
        $('#clear_btn').on('click', function (e) {
            context.clearRect(0, 0, canvasWidth, canvasHeight);
            isSign = false
        });
        function submitImg (orderId,imgData) {
            $.ajax({
            	url: "http://域名或ip地址/oa/order/qiangmingSaving", //假设这是pdf文件流的请求接口
            	type: "post",
            	data: {
            	    orderId: orderId,
            	    qianming: imgData.substring(22)
            	},
            	success: function (res) {
            		console.log(res)
            		if (res.code==200) {
            		    haveSign = true
            		    showToast('提交签名成功');
            		} else {
            		    showToast('提交签名失败');
            		}
            	}
            });
        }
        // 弹窗提示
        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 SendMsg(){
            $.ajax({
                url: "https://test.xxxx.xxxx.com/index.php/WXApi/WXLogin/sendMsg", //
                type: "post",
                // data: {
                //     orderId: orderId,
                //     qianming: imgData.substring(22)
                // },
                success: function (res) {
                    console.log(res)

                    showToast('发送成功');
                    // if (res.code==200) {
                    //     haveSign = true
                    //     showToast('发送成功');
                    // } else {
                    //     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代码存放地址

参考作者地址

标签：function,canvas,程序实现,微信,width,context,var,pdf
From： https://www.cnblogs.com/depressiom/p/17486243.html

相关文章

  • .net core使用Html模板转PDF文件并下载的业务类封装
    前言：我这里文件下载的模板选型优先考虑html模板，上手容易，前后端通用，有了模板后就需要有转换了，html转PDF采用第三方包：SelectPdf，下面是代码核心类： 1-PDFService:usingMicrosoft.AspNetCore.Hosting;usingSelectPdf;namespaceMeShop.Domain.PDF{///<summary......
  • Latex生成pdf过程中遇到cannot run的问题怎么处理？
    如：Latex生成pdf过程中遇到cannotrun的问题怎么处理？提示在生成pdf过程中出现了问题。这说明使用的pdf浏览器地址有问题为了后面修改代码过程中不会出现代码修改了pdf没变的情况，建议直接添加sumatraPDF阅读器直接到官网下载安装包即可。查看准确的安装位置右键->属性 在Late......
  • C#/VB.NET:快速而简单的免费SVG到PDF转换技巧
    在日常工作中，我们常常需要将SVG转换为PDF格式。这是因为SVG格式的图像在打印时可能会出现问题，例如失去分辨率或无法正确适应纸张大小。与此相比，PDF格式则专门用于打印和共享文档，可以确保高质量输出，并且能够自动适应不同的纸张大小。在本文中，我们将介绍如何使用编程方式将SVG文件转......
  • 微信开发
    微信开发者工具的使用实验介绍为了帮助开发者简单高效的开发和调试小程序，微信开发团队在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具 解决方案,本节实验我们主要是学习微信开发者工具的介绍及使用。知识点开发者工具的下载、安装创建、导入、删除项目......
  • 微信小程序中的返回问题
    最近小程序做挺多，这其中就有一个需求就是在执行完某项功能之后，点击页面上的返回要返回不同的地方因为执行这项操作的流程不同，所以返回的路径也不同返回上一页返回A页面返回B页面backPageAfterSign(){//在页面栈中有B就先返回B，无B就返回Aconstpages=getCur......
  • 浅析微信小程序自动化部署miniprogram-ci介绍及实际使用
    一、miniprogram-ci介绍1、miniprogram-ci简介miniprogram-ci是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。开发者可不打开小程序开发者工具，独立使用miniprogram-ci进行小程序代码的上传、预览等操作。文档：https://www.npmjs.com/package/min......
  • 微信小程序—智能小蜜（基于智能语义解析olami开放平台）
    概述该程序支持功能有查天气、查诗词、查百科、算算术、查日历、看笑话、看故事、聊天等，通过用户输入语句智能解析用户意图输出相应答案。详细一、准备工作1、电脑需要安装有微信web开发者工具，如果没有请点击这里安装：下载地址2、成为微信小程序开发者，需要用到appID，详......
  • vue在线预览pdf、word、xls、ppt等office文件
    perview(row){consttypeArr=['doc','docx','ppt','pptx','xls','xlsx']letarr=row.url.split('.')letfileType=arr[arr.length-1]leturl=''......
  • 【专题】2022-2023中国跨境出口B2C电商报告PDF合集分享（附原数据表）
    报告链接：http://tecdat.cn/?p=32805原文出处：拓端数据部落公众号全球疫情的爆发对于全球经济和消费市场都带来了很大的冲击，特别是在消费者的消费行为和零售市场格局方面发生了重大变革。同时由于全球供应链的重新调整，产业分化现象也加速出现。中国跨境电商已经历了十年以上的发......
  • 开源 PDF 库和工具 VS ComPDFKit
    在处理PDF文档时，开发人员可以选择开源PDF库和ComPDFKit等商业库。在本文中，我们将探讨ComPDFKit相对于开源PDF库的优势。 开源PDF库是免费的，任何想要使用它们的人都可以访问。它们在开源许可证下分发，并提供一些基本功能，例如阅读。因此，即使它是免费的，您可能会发现开源P......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99