<html>
<head>
<style>
.box {
width: 600px;
height: 300px;
background-color: pink;
}
</style>
<meta name="layout" content="main">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
</head>
<body>
<div class='box' id="proMain"></div>
<input type="button" value="button" id="saveData">
生成界面如下：
</body>
<script type="text/javascript">
//保存數據,把當前報表的數據保存為Png圖片，在觸發另存為...的同時，指定文件名和文件格式
$('#saveData').click(function () {
//#proMain:要截圖的DOM元素
//useCORS:true:解決跨域問題
html2canvas(document.querySelector('#proMain'), {useCORS: true}).then(function (canvas) {
//獲取年月日作為文件名
var timers = new Date();
var fullYear = timers.getFullYear();
var month = timers.getMonth() + 1;
var date = timers.getDate();
var randoms = Math.random() + '';
//年月日加上隨機數
var numberFileName = fullYear + '' + month + date + randoms.slice(3, 10);
var imgData = canvas.toDataURL();
//保存圖片
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);
};
//最終文件名+文件格式
var filename = numberFileName + '.png';
saveFile(imgData, filename);
//document.body.appendChild(canvas); 把截的圖顯示在網頁上
})
})
</script>
</html>
js 將html 內容保存/轉換為圖片
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。