vue使用html2canvas生成图片并保存到本地

html2canvas官方文档

http://html2canvas.hertzen.com/

npm下载依赖

npm install html2canvas -S

在需要使用的地方引入

import html2canvas from 'html2canvas';

根据我司的需求，下载需要的html页面生成图片

//template
<div class="print " @click="generatorImage" >
          <span>打印</span>
</div>
<div class="content" ref="addImage">
      <div ref="capture" >
           需要保存的html页面
      </div>
</div>        

//js
methods: {
    //点击生成图片
    generatorImage() {
      html2canvas(this.$refs.capture).then(canvas => {
        // this.$refs.addImage.append(canvas);//在下面添加canvas节点
        let link = document.createElement("a");
        link.href = canvas.toDataURL();//下载链接
        link.setAttribute("download","体检表.png");
        link.style.display = "none";//a标签隐藏
        document.body.appendChild(link);
        link.click();
      });
    },
}

注意这里需要使用ref,如对ref不熟悉的可以看我的https://www.cnblogs.com/shcs/p/11914767.html

不驰于空想，不鹜于虚声