前端导出页面为图片

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