vue + html2canvas将div的内容以图片形式导出

一、在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()
          }
      })
  },

四、页面导出

五、导出效果