一、在vue中引入html2canvas,执行命令
npm install html2canvas --save
或者
yarn add html2canvas --save
二、main.js页面引入
import html2canvas from 'html2canvas'
三、.vue页面代码
<a-button @click="exportPic('assessContent','三种专利申请增长情况')" style="margin-left:10px;">导出</a-button>
<div ref="assessContent">内容</div>
exportPic(DivID,title){
html2canvas(this.$refs[DivID]).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
if (dataURL !== "") {
var a = document.createElement('a')
a.download = title;
a.href = dataURL;
a.click()
}
})
},
四、页面导出
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0ca018fbc3ef1c203c619f9cd64a1ca9.png)
五、导出效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6562405dbde31474ec5fa926db748606.png)