html元素导出图片

63 阅读1分钟

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)