vue项目中使用html2canvas 下载当前页面（动态页面宽度、高度）

老规矩先上效果图:

需求1、 只要上图红色区域的内容下载，就需要计算红色区域的内容的动态宽度 、高度。

需求2、当前页面可视区域的内容下载，上传按钮下面的所有内容。

一、 安装依赖 ：安装html2canvas插件

npm isntall html2canvas 或者
cnpm isntall html2canvas

二、在vue项目使用的页面 里面 引入插件

import html2canvas from 'html2canvas'

三、设置截图区域的dom 的div标签的ref

3-1、 当前页面可视区域的内容截屏下载

      <el-row style="margin-bottom:10px">
        <el-button type="primary" icon="el-icon-upload" @click="screenShot()">截屏</el-button>
      </el-row>

      <div ref="screen">
        <canvas id="myCanvas" :width="canvasWidth" :height="canvasHeight">
          你的浏览器还不支持canvas
        </canvas>
      </div>

3-2、 只要上图红色区域的内容下载，就需要计算红色区域的内容的动态宽度 、高度

      <div ref="screen" :style="{width: canvasWidth, height: canvasHeight}">
        <canvas id="myCanvas" :width="canvasWidth" :height="canvasHeight">
          你的浏览器还不支持canvas
        </canvas>
      </div>

四、截图并下载图片到本地

//截屏
screenShot () {
　html2canvas(this.$refs.screen, {
　　　backgroundColor: '#FFFFFF',
     useCORS: true
　}).then((canvas) => {
    if (navigator.msSaveBlob) { // IE10+ 
      let blob = canvas.msToBlob(); 
      return navigator.msSaveBlob(blob, name); 
    } else {
      let imageurl = canvas.toDataURL('image/png')
      //这里需要自己选择命名规则
      let imagename = ""
      this.fileDownload(imageurl, imagename)
    }
　})
},
//下载截屏图片
fileDownload(downloadUrl, downloadName) {
  let aLink = document.createElement("a");
  aLink.style.display = "none";
  aLink.href = downloadUrl;
  aLink.download = `${downloadName}.jpg`;
  // 触发点击-然后移除
  document.body.appendChild(aLink);
  aLink.click();
  document.body.removeChild(aLink);
}