需要运用到html2canvas
首先安装
npm i html2canvas --save
再引用
import html2canvas from "html2canvas"下面附上代码
template代码:
<img id="2canvas" style="width: 100%;" mode="widthFix" :src="selectItem.sigimg" alt="" > <div slot="footer"> <el-button type="primary" @click="handleDownloadqrCode" >下载图片</el-button> </div>
js代码:
import html2canvas from 'html2canvas' methods:{ handleDownloadqrCode() { html2canvas(document.getElementById('2canvas')).then((canvas) => { var pageData = canvas.toDataURL('image/png', 1.0) // 第二个参数可以调节下载图片的清晰度 const link = document.createElement('a') // 创建一个a标签 link.style.display = 'none' // 去掉此标签的所有样式避免展示出a标签 link.href = pageData // 把获取到的流文件放到href属性里 link.setAttribute('download', this.selectItem.name + '.png') // 调用download属性,并添加名字 document.body.appendChild(link) // 添加这个a标签到body上 link.click() // 触发click事件 }) }, }