【js小案例】使用js实现在线签名并导出pdf文件

最新推荐文章于 2025-06-19 16:33:29 发布

evan_qb

最新推荐文章于 2025-06-19 16:33:29 发布

阅读量5.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Evan_QB/article/details/80000117

在网上经历了一番搜索，发现了一些插件实现该功能。

本次引用的插件有:

jspdf.min.js

html2canvas-0.4.1.js

页面index.html

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/html2canvas-0.4.1.js"></script>
<script type="text/javascript" src="js/jspdf.min.js"></script>

<title>手写签名</title>
<style type="text/css">
#canvas{ }

#canvasDiv{
	border:1px dotted #000;
	width:400px;
	height:300px;
}
</style>

</head>
<body id="bb">
<div id="pdfContainer" class="container" style="background-color:#fff">
      合作协议（个人合作）<br>
	甲方：XXX有限公司<br>
	乙方：＿＿＿＿先生（或女士，下同）<br>
	杭州永良企业管理咨询有限公司（以下简称“甲方”）与＿＿＿＿先生（以下简称“乙方”）经过友好协商，在相互信任、相互尊重和互惠互利的原则基础上，双方达成以下合作协议：<br>
	一、甲乙双方在符合双方共同利益的前提下，就企业管理咨询业务合作等问题，自愿结成战略合作伙伴关系，乙方为甲方提供业务资源，协助甲方促成业务与业绩，实现双方与客户方的多赢局面。<br>
	二、乙方为甲方提供业务机会时，应严格保守甲方与客户方的商业秘密，不得因己方原因泄露甲方或客户方商业秘密而使甲方商业信誉受到损害。<br>
	三、甲方在接受乙方提供的业务机会时，应根据自身实力量力而行，确实无法实施或难度较大、难以把握时应开诚布公、坦诚相告并求得乙方的谅解或协助，不得在能力不及的情况下轻率承诺，从而使乙方客户关系受到损害。<br>
	四、乙方为甲方提供企业管理咨询业务机会并协助达成的，甲方应支付相应的信息资源费用。费用支付的额度视乙方在业务达成及实施过程中所起的作用而定，原则上按实际收费金额的一定百分比执行，按实际到账的阶段与金额支付，具体为每次到账后的若干个工作日内支付。<br>
	五、违约责任：<br>
	1、合作双方在业务实施过程中，如因己方原因造成合作方、客户方商业信誉或客户关系受到损害的，受损方除可立即单方面解除合作关系外，还可提出一定数额的经济赔偿要求。同时，已经实现尚未结束的业务中应该支付的相关费用，受损方可不再支付，致损方则还应继续履行支付义务。<br>
	2、甲方在支付信息资源费用时，如未按约定支付乙方款项的，每延迟一天增加应付金额的5%，直至该笔金额的全额为止。<br>
	六、争议处理：如发生争议，双方应积极协商解决，协商不成的，受损方可向杭州市仲裁委员会申请仲裁处理。<br>
	七、本协议有效期暂定一年，自双方代表（乙方为本人）签字之日起计算，即从＿＿＿＿年＿＿月＿＿日至＿＿＿＿年＿＿月＿＿日止。本协议到期后，甲方应付未付的信息资源费用，应继续按本协议支付。<br>
	八、本协议到期后，双方均未提出终止协议要求的，视作均同意继续合作，本协议继续有效，可不另续约，有效期延长一年。<br>
	九、本协议在执行过程中，双方认为需要补充、变更的，可订立补充协议。补充协议具有同等法律效力。补充协议与本协议不一致的，以补充协议为准。<br>
	十、本协议经双方盖章后生效。本协议一式贰份，甲乙双方各持一份，具有同等法律效力。<br>
	<br><br>
	<br><br>
	<br>
	<div id="canvasDiv"></div>
	<img  id="qmimg"  />
</div>
<br>