在vue中使用html2canvas实现截图并使用浏览器下载截图到本地

html2canvas github地址
https://github.com/niklasvh/html2canvas
使用文档
https://html2canvas.hertzen.com/
1. 首先安装html2canvas

Install NPM

npm install --save html2canvas

Install Yarn

yarn add html2canvas

2. 要截图的布局（可以是整个html，body）这里我就随便写啦。

<div class="flexWrapper">
     <div class="wrapperLeft">
            <div class="leftHeader">leftHeader</div>
            <div class="leftContent">
                <template>
                  <div v-for="item in [1,2,3,4,5,6]" :key="item" style="height:200px;">{{item}}</div>
              </template>
            </div>   
     </div>
      <div class="wrapperRight" ref="resultCanvas">
          <div class="rightHeader">header</div>
          <div class="rightContent">
              <template>
                  <div v-for="item in [1,2,3,4,5,6]" :key="item" style="height:200px;">{{item}}</div>
              </template>
              <div>
                  
              </div>
          </div>
      </div>
</div>

3. 开始使用了

先import进来啦

 import html2canvas from 'html2canvas';

4. 自定义导出的方法

图片转格式

 dataURLToBlob(dataurl) {//ie 图片转格式
          var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], {type: mime})
        },

截图并导出
resultCanvas就是你要截图的部分
也可以是dom的id或者body
看自己的需求定义吧
一定要是dom元素，不然会报错！！！！

downloadResult() {
          let canvasID = this.$refs.resultCanvas;
          let that = this;
          let a = document.createElement('a');
          html2canvas(canvasID).then(canvas => {
            let dom = document.body.appendChild(canvas);
            dom.style.display = "none";
            a.style.display = "none";
            document.body.removeChild(dom);
            let blob = that.dataURLToBlob(dom.toDataURL("image/png"));
            a.setAttribute("href", URL.createObjectURL(blob));
            a.setAttribute("download", "xxxxxx.png")
            document.body.appendChild(a);
            a.click();
            URL.revokeObjectURL(blob);
            document.body.removeChild(a);
          });
        },

5. 这样就可以实现截图并下载啦。

要截图的部分dom元素多的话会造成页面卡顿~~~~~~~~~~~~就这样吧=。=