html2canvas使用文档

一、安装

Install NPM

npm install --save html2canvas

Install Yarn

yarn add html2canvas

二、引入

import html2canvas from 'html2canvas';

三、使用

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

<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);
}

四、配置项

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