Vue 实现页面一键截屏功能

1，安装所需要的包：

npm i html2canvas --save //将页面内容区域转化为图片格式

2，在你的页面引入html2canvas 组件

import html2canvas from 'html2canvas'

3，定义点击按钮和截屏方法：

    <div style="color:#fff">
            <div class="icon-button right">
			<!--截屏按钮图标-->
              <span class="iconfont icon-iconcut" @click="screenShot"></span>
            </div>
     </div>

    //截图
    screenShot() {
    
    
      //获取页面dom
      //这里的html标签是获取页面最大的dom元素；根据实际业务场景自行更改
      const el = document.querySelector('html');
      html2canvas(el, {
    
    allowTaint: true}).then((canvas)=> {
    
    
        //document.body.appendChild(canvas)  页面布局会乱
        //转换base64
        const capture = canvas.toDataURL('image/png');
        //下载浏览器弹出下载信息的属性
        const saveInfo = {
    
    
         //导出文件格式自己定义，我这里用的是时间作为文件名
          'download': Moment().format("YYYY-MM-DD HH:mm:ss")+`.png`,
          'href': capture
        };
        //下载，浏览器弹出下载文件提示
         this.downloadFile(saveInfo);
      
        //调用保存接口 如果需要后台保存，放开注释
     /*   uploadImage({capture:capture}).then(res => {
          if (res.code == 200) {
            this.$message.success("截取成功！")
          }
        });*/
      })
    },

   //下载截图
    downloadFile(saveInfo) {
    
    
      const element = document.createElement('a');
      element.style.display = 'none';
      for (const key in saveInfo) {
    
    
        element.setAttribute(key, saveInfo[key]);
      }
      document.body.appendChild(element);
      element.click();
      setTimeout(() => {
    
    
        document.body.removeChild(element);
      }, 300)
    }

这是纯前端截屏，保存文件以下载的方法是方式展现，文件保存位置由浏览器设置；

如果需要后端来控制保存位置需要调用保存接口，接口如下：

4，后代接口

    @PostMapping(value = "/uploadImage", produces = {
    
    MediaType.APPLICATION_JSON_UTF8_VALUE})
    @ApiOperation(value = "保存截屏", notes = "保存截屏")
    @ResponseBody
    public Object uploadImage(@RequestBody String jsonStr) {
    
    
        //获取前端传送base64文件
        String capture = JSONUtil.parseObj(jsonStr).getStr("capture");
        //截掉data:image/png;base64
        String base64 = capture.substring(capture.indexOf(",") + 1);
        //保存路径
        String path = "~/Desktop/截屏/" + DateUtil.format(new Date(), "yyyy.MM.dd_HH.mm.ss") + ".png";
        //转换保存
        ImgUtil.write(ImgUtil.toImage(base64), FileUtil.file(path));
        logger.info("-----------------截屏图片保存位置---------------------------：" + path);
        return setSuccessModelMap();
    }
注意：base64字符串偏大，用json对象传；当然方法有很多种；
     base64字符串文件包含头部“data:image/png;base64“，需要截取掉，否则保存的图片无法打开。