html2canvas使用文档(vue举例)

npm install --save html2canvas

yarn add html2canvas

import html2canvas from 'html2canvas';

<div ref="picture">
    <h4>Hello world!</h4>
</div>

// 配置项
const setup = {
    useCORS: true, // 使用跨域
};
html2canvas(this.$refs.picture, setup).then((canvas) => {
    document.body.appendChild(canvas); // 自动在下方显示绘制的canvas图片
});

// 生成图片
creatImg() {
    const setup = {
        useCORS: true, // 使用跨域
    };
    html2canvas(this.$refs.picture, setup).then((canvas) => {
        const link = canvas.toDataURL("image/jpg");
        this.exportPicture(link, "文件名");
    });
}

// 导出图片
exportPicture(link, name = "未命名文件") {
    const file = document.createElement("a");
    file.style.display = "none";
    file.href = link;
    file.download = decodeURI(name);
    document.body.appendChild(file);
    file.click();
    document.body.removeChild(file);
}