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

不馳於空想，不鶩於虛聲