2023.04.07
524
左迁
html2canvas使用
npm install --save 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图片 });
作者：前端学习笔记_zxh
链接：https://juejin.cn/post/7207342547361267771
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
// 生成图片 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);
}
作者：前端学习笔记_zxh
链接：https://juejin.cn/post/7207342547361267771
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
028-86040068
联系我们
