类似于截屏的功能，将界面的全部或者某一部分保存为图片
特别注意：
1、若截图的dom中存在transform的样式，图片可能会存在偏差，特别是地图的截图，截图前需要将html标签中含有transform的样式去掉，用position、margin等其他样式替换掉
2、如果截图的是地图，请查看地图的初始化参数中，是否有类似于preserveDrawingBuffer的参数。比如mapbox渲染的地图，需要在初始化时设置preserveDrawingBuffer:true，才能保存地图截图，否则保存是一张空白地图
目录
2-2、 将截图保存为图片,并实现下载功能(通过a标签下载)
2-3、 将截图保存为图片,并实现下载功能（通过转化为blob下载）
1、安装
npm下载插件
npm install --save html2canvas2-1、获取截图到的canvas
获取到的是canvas的html标签代码：<canvas ......></canvas>，可以放到你想要放置的地方
html部分:
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
js部分：
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});2-2、 将截图保存为图片,并实现下载功能(通过a标签下载)
html部分：
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
js部分：
html2canvas(document.querySelector('#capture'), {
useCORS: true,
allowTaint: false
}).then(canvas => {
//也可不指定格式，直接canvas.toDataURL();
const canvasUrl = canvas.toDataURL('image/png');
// 生成a标签进行下载
const aDom = document.createElement('a');
// 设置下载的文件名，默认是'下载'
aDom.download = '自定义名称';
aDom .href = canvasUrl;
document.body.appendChild(aDom );
aDom.click();
// 下载之后把创建的元素删除
aDom.remove();
});
2-3、 将截图保存为图片,并实现下载功能（通过转化为blob下载）
利用插件获取到的是canvas标签，将其最终转化为blob，实现界面下载的效果
html部分：
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
js部分：
html2canvas(document.querySelector('#capture'), {
useCORS: true,
allowTaint: false
}).then(canvas => {
let data_base64 = canvas.toDataURL('image/png');
let blobVal = data_to_blob(data_base64); // 转换为 blob
let name = '信息表';
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blobVal, name);
} else {
var link = document.createElement('a');
link.setAttribute('href', window.URL.createObjectURL(blobVal));
link.setAttribute('download', name + '.png');
document.body.appendChild(link);
link.click();
}
});
// base64 转换为 blob
functon data_to_blob(data_base64) {
var arr = data_base64.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}反馈描述：
反馈一： 背景有图片下载不下来
网友评论说，要截图的区域有背景图片，截图时背景图如果是线上就能截图下来，背地就不行了；
我在自己的本地测试了下，本地的背景图片可以保存下来，我把自己的代码贴出来，本人使用的是vue
1、全部代码如下
<template>
<main>
<el-button type="primary" @click="handleDownload">下载截图</el-button>
<div id="capture">
<h4 style="color: #000">Hello world!</h4>
</div>
</main>
</template>
<script setup lang="ts">
import html2canvas from 'html2canvas';
const handleDownload = () => {
html2canvas(document.querySelector('#capture'), {
useCORS: true,
allowTaint: false
}).then((canvas) => {
//也可不指定格式，直接canvas.toDataURL();
const canvasUrl = canvas.toDataURL('image/png');
// 生成a标签进行下载
const aDom = document.createElement('a');
// 设置下载的文件名，默认是'下载'
aDom.download = '自定义名称';
aDom.href = canvasUrl;
document.body.appendChild(aDom);
aDom.click();
// 下载之后把创建的元素删除
aDom.remove();
});
};
</script>
<style>
#capture {
width: 500px;
height: 500px;
padding: 10px;
border: 1px solid #f5da55;
background-image: url('./test.png');
background-repeat: no-repeat;
background-position: center;
}
</style>
2、目录结构如下，我的测试例子的图片和组件放在一起在
3、前端界面展示
4、截图下来的效果
