html2canvas简明使用教程

2020-06-28 03: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>


最新评论: