原理:
使用一个名为html2canvas的JavaScript库。这个库允许你将当前的HTML内容渲染到一个canvas元素上，然后将其转换为图像并进行下载。
你需要在项目中引入html2canvas库。你可以从官方网站（https://html2canvas.hertzen.com/）下载，或使用npm或yarn等包管理工具进行安装。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./html2canvas.min.js"></script>
</head>
<body>
<div id="screenshotDiv">
<h1>Screenshot and Download</h1>
<div style="height: 100px;width: 150px;background-color: red;"></div>
<div style="height: 100px;width: 150px;background-color: green;"></div>
<div style="height: 100px;width: 150px;background-color: greenyellow;"></div>
</div>
<button onclick="captureScreenshot()">Capture and Download</button>
</body>
<script>
function captureScreenshot() {
// var element = document.documentElement;//整个页面
var element = document.getElementById("screenshotDiv");//局部页面
html2canvas(element).then(function(canvas) {
var dataUrl = canvas.toDataURL('image/png');
var link = document.createElement('a');
link.download = 'screenshot.png';
link.href = dataUrl;
link.click();
});
};
</script>
</html>
效果:
注意:
使用html2canvas库来捕捉当前HTML文档的内容，并将其渲染到canvas元素上。一旦内容被渲染，它将把canvas转换为数据URL，并创建一个带有适当下载属性的链接元素。最后，它模拟点击链接来触发截图的下载。
确保通过从官方网站下载库文件或从CDN引用它来在项目中引入html2canvas.min.js文件。该库提供了其他配置选项，可以用来自定义截图捕捉的过程。
请记得在不同的浏览器和环境中进行测试，以确保兼容性。
