1.首先要下载安装 html2canvas
npm install --save html2canvas
2.使用html2canvas导出图片
<div class="imag-box" ref="dialogWrapper">
<!-- html页面 内容 -->
</div>
<button @click="toImage()></button>
toImage(){
html2canvas(this.$refs.dialogWrapper as any).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
this.imgUrl = dataURL;
console.log(this.imgUrl)
const a = document.createElement("a");
a.download = `图片名字.png`; //点击下载时候传递过来的文件名称包括本身的格式
a.href = dataURL;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// 释放掉blob对象
});
}
前端导出页面为图片
于 2023-04-25 16:28:53 首次发布