这篇博客介绍了如何在项目中利用html2canvas插件将网页内容转换为图片并进行下载。通过示例代码展示了如何选取特定DOM元素，调用html2canvas将其转换为canvas，然后将canvas内容保存为图片文件供用户下载。该方法适用于前端开发中的页面截图需求。
需求：
在做项目中遇到需求，需要吧页面保存成图片下载下来，经过查找资料找到了“html2canvas”这个插件。
实现：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下载页面</title>
<script src="./js/downloadDom/html2canvas.min.js"></script>
<script type="text/javascript" src="./js/downloadDom/fileSaver.min.js"></script>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55; width: 200px;">
123
</div>
<button type="button" name="button" οnclick="convert()">下载</button>
<br>
<script type="text/javascript">
//开始转换
function convert() {
html2canvas(document.querySelector("#capture")).then(canvas => {
//将canvas内容保存为文件并下载
canvas.toBlob(function(blob) {
saveAs(blob, "统计报告.png");
});
});
}
</script>
</body>
</html>
效果：
扫一扫
1327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
