今天遇到一个需求要求下载一个二维码，但是这个二维码的边框样式是自己写出来的，无法直接下载，然后就从网上找了一个html转图片的方法，进行下载

一、安装

npm install html2canvas

二、引入

import html2canvas from 'html2canvas';

代码如下（示例）：

通过定义ref获取需要进行转换的Dom元素

<div ref="imageDom">
	<a :href="imgUrl" download>
	      <el-button type="primary" @click="trDowload">下 载</el-button>
	</a>
</div>

转换操作

html2canvas(this.$refs.imageDom).then(img => {
     // 转成图片，生成图片地址(如需将图片转为file 文件，请自行处理)
     this.imgUrl = img.toDataURL("image/png"); //此处为转换后生成的图片地址
 })

this.imgUrl即是转换后的图片
然后根据需要进行下载