1.引入插件
npm install --save html2canvas
或
yarn add html2canvas
2.引用插件
在需要的组件中引用
import html2canvas from "html2canvas"
3.使用
在需要保存为图片的内容最外层父元素打上ref标记 ,代表此部分内容需要保存为图片。
<div id="canvasToPic" ref="canvasToPic">
<!--xxxxxxxxxx页面内容-->
</div>
这样就完成了将页面保存为图片的全部过程,不过保存的图片,默认背景色为白色,可以设置backgroundColor属性进行修改
//html2canvas(this.$refs.canvasToPic). //不设置背景色
html2canvas(this.$refs.canvasToPic,{
backgroundColor:'red'
}).then(canvas => {
//回调中返回的其实就是一个canvas对象
//可以使用canvas的toDataURL方法生成图片链接
//url就是生成的链接可直接写入image标签的src中展示
this.url= canvas.toDataURL("image/png");
// 创建一个a标签
var link= document.createElement("a");
//将生成的图片url赋值给a标签的href属性
link.href = this.url;
//设置下载的文件名
link.download = "页面截图";
// 将a标签插入dom中
document.body.appendChild(link);
//模拟点击事件触发下载
link.click();
// 完成之后销毁创建的a标签
document.body.removeChild(link);
});
原文链接:https://blog.csdn.net/Lclghjk/article/details/109315647