标签：href doctype 测试 win css ice append click app
<!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，就可以直接下载了。参考文章
https://zhuanlan.zhihu.com/p/28176700
前端实现获取canvas下载地址以及下载basse64图片格式功能
标签：href doctype 测试 win css ice append click app
原文地址：https://www.cnblogs.com/binglicheng/p/12952526.html
