vue项目使用html2canvas实现截图功能

这个截图有点类似下载的那种，可以按照自己的需要在代码中指定要截屏的部分，点击截图会自动保存到本地，更贴切的说法可以说是快照。不同于我们常用的截图软件，这点要注意。实现结果如图：

html2canvas 是 JavaScript 实现页面截图的类库，html2canvas 使你可以直接在用户浏览器上截取网页或部分网页的“屏幕快照”。屏幕截图基于DOM，因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上可用的信息来构建屏幕截图。

具体实现方式如下：
（1）安装 html2canvas

npm install html2canvas --save

（2）将 html2canvas 导入项目

import html2canvas from 'html2canvas'

（3）具体实现代码
HTML

<template>
    <!--点击button即可实现页面的截图-->
    <el-button size="mini" type="primary" plain @click="download">案例导出</el-button>
    <div  ref="faultTree">
      <!--这里是需要截图的区域-->
    </div>
</template>

js方法

import html2canvas from 'html2canvas'
methods: {
    // 下载
    download() {
      const ref = this.$refs.faultTree // 截图区域
      html2canvas(ref, { backgroundColor: '#fff' })
        .then(canvas => {
          const dataURL = canvas.toDataURL('image/png')
          this.dataURL = dataURL
          const creatDom = document.createElement('a')
          document.body.appendChild(creatDom)
          creatDom.href = dataURL
          creatDom.download = '导出淘汰案例'
          creatDom.click()
        })
    }
  }