之前做过一个在线签名的功能,具体的需求是,用户可以在线签名,可以对签名进行编辑,最终再生成pdf的功能.
这次不聊在线签名,只谈html代码最后生成pdf导出
这个功能需要用到两个组件来配合,先把html转换成canvas,然后在使用jspdf对canvas进行转换并下载
组件名称:[html2canvas],[jspdf],代码在github上,gitee也有,搜索名字就可以查到:yylcha.smooth-signature
- 项目源码
打开SmoothSignature_CSharp版本即可,另外一个是vue版的
项目资源文件介绍
引用 html2canvas.js | jspdf.js 你copy过去也可以直接使用,这两个js是我们核心使用文件
js引用
HTML Code
<div> <div class="singPanel" id="overtimeApp"> <table class="cssTb"> <tr> <td>部门</td> <td></td> <td>姓名</td> <td>XXX</td> <td>职位</td> <td>.net开发</td> </tr> <tr> <td>加班事由</td> <td colspan="5">测试</td> </tr> <tr> <td>加班时间</td> <td colspan="5"> <span>日期：__2099__年__12__月__31__日（□工作日 □双休日 □国定假日）</span> <br /> <span>时间：从__08__点到__18__点</span><br /> <span>共计__8__小时</span> </td> </tr> <tr> <td>换算方式</td> <td colspan="5"><span>□调休 □调休延期 □加班费</span></td> </tr> <tr> <td>实际加班时数（由HR填写）</td> <td colspan="3"></td> <td>人力资源部签收</td> <td></td> </tr> </table> <div class="cssWorld"> <div style="float: left; width: 600px;margin-top:5px"> <div style="float: left">申请部门经理签字：</div> <div class="dvCanvas"> <canvas style="border: 1px solid black"></canvas> </div> </div> <div style="float: right; width: 200px"> 2099年 12月 31日 </div> <div hidden id="hdnSignature"></div> </div> </div> <div class="cssBtn"> <button class="btn btn-primary btn-sm" type="button" id="btnClear">清空签名</button> <button class="btn btn-primary btn-sm" type="button" id="btnUndo">撤销</button> <button class="btn btn-primary btn-sm" type="button" id="btnGeneraCanvas">确定</button> <button class="btn btn-primary btn-sm" type="button" id="btnHandleColor">修改字迹颜色</button> <br /> <br /> <button class="btn btn-primary" type="button" id="btnDownLoad">生成PDF</button> </div>
JavaScript Code
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script><script src="~/js/smooth-signature.min.js"></script>
<script src="~/js/smooth-signature.js">
</script><script src="~/js/html2canvas.js"></script><script src="~/js/jspdf.js"></script>
<script>
$(function () {
//获取定义画布
let canvas = document.querySelector("canvas");
//画布参数
let options = {
width: Math.min(window.innerWidth, 370),//宽度
height: 200,//高度
minWidth: 4,
maxWidth: 12,
// color: '#1890ff',
bgColor: "#f6f6f6",
};
//初始化smoothsignature画布
var signature = null;
if (canvas) {
signature = new SmoothSignature(canvas, options);
}
//生成pdf时间
$("#btnDownLoad").click(function () {
//需要打印的html
var html = document.getElementById("overtimeApp");
//使用html2canvas把html元素转换成canvas
//jsPDF 把canvas转换成pdf并导出
html2canvas(html).then(function (canvas) {
//获取html转成canvas的宽度和高度
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
// 创建PDF文档对象
var pdf = new jsPDF('p', 'pt', 'a4');
//通过canvas的宽高计算pdf页面的大小，自适应pdf
var scaleFactor = pdf.internal.pageSize.width / canvasWidth;
var scaleHeight = canvasHeight * scaleFactor;
// 将canvas转化为图片并添加至PDF文档
pdf.addImage(canvas.toDataURL('image/png'), 'JPEG', 20, 30, pdf.internal.pageSize.width - 40, scaleHeight);
// 下载PDF文档
pdf.save('加班申请单.pdf');
});
});
//清除签名画布
$("#btnClear").click(function () {
if (signature) {
signature.clear();
} else {
alert("画布初始化失败！");
}
});
//返回上一步
$("#btnUndo").click(function () {
if (signature) {
signature.undo();
} else {
alert("画布初始化失败！");
}
});
//把签名画布转换成image标签-未使用
$("#btnGeneraCanvas").click(function () {
if (signature) {
var pngUrl = signature.getPNG();
var blob = this.dataURLToBlob(pngUrl);
var url = window.URL.createObjectURL(blob);
$("#hdnSignature").attr(`<img src='${url}'></img>`)
} else {
alert("画布初始化失败！");
}
});
//更改笔线颜色
$("#btnHandleColor").click(function () {
if (signature) {
signature.color = "#" + Math.random().toString(16).slice(-6);
} else {
alert("画布初始化失败！");
}
});
})
//把image转换成blob
function dataURLToBlob(dataURL) {
// Code taken from https://github.com/ebidel/filer.js
const parts = dataURL.split(";base64,");
const contentType = parts[0].split(":")[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
</script>
复制Css Code
<style> .cssSign { height: 200px; width: 440px; float: right; } .cssTb { margin: auto; width: 40%; } .cssWorld { margin: auto; width: 40%; } table, td { border: 1px solid black; width: 500px; } .cssBtn { margin-top: 300px; text-align: center; } .singPanel { width: 100%; height: 400px; } </style>
问题整理
为什么不直接使用jspdf来实现html转换成pdf呢?
这个问题我试过,jspdf是支持把html直接导出成pdf的,但是会有一个问题,中文会出现乱码的
再加上原来的签名组件是一个canvas,所以我使用了这个办法,后续其他的项目应用我也都是这样处理的
它的工作原理是,帮你把html代码转换成canvas,然后jspdf把canvas转换成pdf,最后导出
