html2canvas使用文档_html2canvas文档

一、安装

Install NPM

npm install --save html2canvas
1

Install Yarn

yarn add html2canvas
1

二、引入

import html2canvas from 'html2canvas';
1

三、使用

以 vue 举例，这样写起来比较方便

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

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

如果想要将图片导出，可以这样写

// 生成图片
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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

四、配置项

大部分情况下使用默认配置即可，如有需要，可根据配置项修改。