推荐
html2canvas简明使用教程
2020-06-27 19:32:16 卢浮宫 版权声明：本文为站长原创文章，转载请写明出处
一、背景
今天项目中牵涉到一个html图片生成的需求，然后就发现了这个第三方的js -- html2canvas
PS: 附上官方使用文档 http://html2canvas.hertzen.com/
二、说一下简明使用教程吧
①引入JS
可以在官方下载，也可以使用CDN
②在需要的html中指定操作元素
<div id="capture" style="padding:2rem;">
// your code ...
</div>
③调用指定的方法
export(){
html2canvas(document.querySelector("#capture")).then(canvas => {
saveFile(canvas.toDataURL(),"ccc.png");
});
}
saveFile(data, filename){
const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
const event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
三、附上主要代码段
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>tt</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="html2canvas.js"></script>
<style>
.bh_table{
width:100%;
max-width: 1165px;
}
.textCenter{
text-align:center;
}
.bh-text-right{
text-align: right;
}
.marginTop30{
margin-top:30px;
}
.bh-font-weight{
font-weight:bold;
}
td{
width:9%;
}
.bh-width90{
width:0.3%;
}
</style>
</head>
<body>
<div id="capture" style="padding: 10px;">
<div style="max-width: 1165px; margin: 6%; border: 1px solid gray; padding: 1%;">
<table>
<tbody>
<tr style="text-align: center; font-size: xx-large;">
<td colspan="10" class="bh-font-weight">XXXX</td></tr>
<tr></tr>
</tbody>
</table>
<table class="marginTop30" style="width: 1000px;">
<tbody>
<tr>
<td class="bh-font-weight" style="width: 100px;">客户名称：</td>
<td style="width: 300px;">XXX</td>
<td class="bh-text-right bh-font-weight" style="width: 100px;">运?单?号：</td>
<td style="width: 300px;">XXX</td>
<td class="bh-text-right bh-font-weight" style="width: 100px;">入仓时间：</td>
<td colspan="2" style="width: 200px;">2020-XX-27 XX:27:37</td></tr>
<tr>
<td class="bh-font-weight" style="width: 6%;">唛??头：</td>
<td>XXX</td>
<td class="bh-text-right bh-font-weight">付款方式：</td>
<td>票结</td>
<td class="bh-text-right bh-font-weight">尺寸类型：</td>
<td colspan="2">单件</td></tr>
</tbody>
</table>
<table class="marginTop30" style="width: 1000px; margin-top: 20px;">
<tbody>
<tr>
<td class="bh-font-weight" style="width: 100px;">开户行：</td>
<td style="width: 300px;"></td>
<td class="bh-text-right bh-font-weight" style="width: 100px;">开户号：</td>
<td style="width: 300px;"></td>
<td class="bh-text-right bh-font-weight" style="width: 100px;">SWIFT CODE：</td>
<td colspan="2" style="width: 100px;"></td>
</tr>
<tr>
<td class="bh-font-weight" style="width: 6%;">开户人：</td>
<td></td>
<td class="bh-text-right bh-font-weight">银行地址：</td>
<td></td>
<td class="bh-text-right bh-font-weight"></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
<table class="marginTop30" style="width: 80%; max-width: 1000px;">
<tbody>
<tr rowspan="3">
<td class="bh-font-weight" style="width: 3%;">Form：</td>
<td colspan="2">XXX</td>
<td class="bh-font-weight" style="width: 3%;">To：</td>
<td colspan="2" style="width: 25%;"></td>
</tr>
<tr>
<td style="width: 3%;"></td>
<td colspan="2">XXX</td>
<td style="width: 3%;"></td>
<td colspan="2" style="width: 25%;"></td>
</tr>
<tr>
<td style="width: 3%;"></td>
<td colspan="2"></td>
<td style="width: 3%;"></td>
<td colspan="2" style="width: 25%;"></td>
</tr>
</tbody>
</table>
<table border="1" class="bh_table marginTop30 textCenter">
<tbody>
<tr>
<td class="bh-font-weight">唛头</td>
<td class="bh-font-weight">费用类型</td>
<td class="bh-font-weight">币种</td>
<td class="bh-font-weight">方数</td>
<td class="bh-font-weight">单价</td>
<td class="bh-font-weight">金额</td>
<td class="bh-font-weight">税点</td>
<td class="bh-font-weight">汇总金额</td></tr>
<tr>
<td colspan="4" class="bh-font-weight">合计：</td>
<td></td>
<td></td>
<td></td>
<td>0</td></tr>
</tbody>
</table>
<table border="1" class="bh_table marginTop30 textCenter">
<tbody>
<tr>
<td class="bh-font-weight">NO</td>
<td class="bh-font-weight">中文品名</td>
<td class="bh-font-weight">英文品名</td>
<td class="bh-font-weight">尺寸类型</td>
<td class="bh-font-weight">件数</td>
<td class="bh-font-weight">重量</td>
<td class="bh-font-weight">长</td>
<td class="bh-font-weight">宽</td>
<td class="bh-font-weight">高</td>
<td class="bh-font-weight">体积</td>
<td class="bh-font-weight">计费方数</td></tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td>单件</td>
<!---->
<td>25</td>
<td>550</td>
<td>50</td>
<td>29</td>
<td>39</td>
<td>1.4138</td>
<td></td>
</tr>
</tbody>
</table>
<table class="bh_table marginTop30" style="width: 65%;">
<tbody>
<tr>
<td class="bh-width90 bh-font-weight">备注：</td>
<td></td>
</tr>
<tr>
<td class="bh-width90"></td>
<td>1、阁下委托...</td></tr>
<tr>
<td class="bh-width90"></td>
<td>2、货物在目的国配...</td></tr>
<tr>
<td class="bh-width90"></td>
<td>3、为了降低您...</td></tr>
<tr>
<td class="bh-width90"></td>
<td>4、一旦发货...</td></tr>
</tbody>
</table>
<div style="width: 30%; float: right; margin-top: -120px;">
<div style="float: left; width: 30%; text-align: right; margin-left: 130px; margin-top: 10px;">查询二维码：</div>
<div id="qrcode" style="width: 100px; height: 100px; margin-top: 15px; float: right;" title="XXX">
<canvas width="100" height="100" style="display: none;"></canvas>
<img src="XXX" style="display: block;"></div>
</div>
</div>
</div>
<script>
document.onload = xaTest();
function xaTest(){
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
debugger
saveFile(canvas.toDataURL(),"ccc.png");
});
}
var saveFile = function(data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
</script>
</body>
</html>更多精彩请关注guangmuhua.com