全部代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html2canvas，實現下載</title>
</head>
<body>
<ol class="ol">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
asdasdasdasdas
</ol>
<a href="javascript:;" class="btn">點我哦</a>
<a href="javascript:;" class="btn2" download="ddd.png">下載</a>
<!-- 引入Jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 引入html2canvas -->
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script>
$(function () {
html2canvas(document.querySelector('.ol')).then(function (canvas) {
$('.ol').remove() //移除頁面上的該元素
canvas.id = "canvas";
var dataURL = canvas.toDataURL("image/png");
$(document.body).data('url', dataURL);
document.body.appendChild(canvas); //像頁面中添加轉為canvas之后的元素
})
$('.btn').on('click', function () {
var dataURL = $(document.body).data('url');
var tmpUrl = "data:application/octet-stream;base64" + dataURL;
$('.btn2').attr('href', tmpUrl);
// window.open(tmpUrl);
})
});
</script>
</body>
</html>
核心代碼解析：
download="ddd.png"，ddd就是文件名，.png則是文件后綴名。- 這樣就是在數據前面加了
"data:application/octet-stream;base64" + dataURL，就可以直接下載了。
- PC上測試可以下載，手機上也測試可以下載。
參考文章
https://zhuanlan.zhihu.com/p/28176700
