1、html2canvas将html元素转成canvas
2、创建a标签下载
示例代码:
function downloadHtml() {
// 获取html元素
let element = document.getElementsByClassName('info')[0]
// 调用html2canvas将html元素转canvas
html2canvas(element).then(function (canvas) {
// 使用toDataURL()方法将其转换为图像数据URL
let imgSrc = canvas.toDataURL('/image/jpeg')
// 创建一个临时的<a>元素,并设置其download属性为期望的文件名,href属性设置为图像数据URL
var tmpLink = document.createElement('a');
tmpLink.download = 'canvasImage.jpg'; // 设置下载文件的名称
tmpLink.href = imgSrc;
// 将这个临时链接添加到DOM中,并模拟点击来触发下载
document.body.appendChild(tmpLink);
tmpLink.click();
document.body.removeChild(tmpLink);
});
}
html2canvas:html2canvas - Screenshots with JavaScript (hertzen.com)