vue 使用 html2canvas 截屏并下载图片至本地（重点兼容ie浏览器）

安装html2canvas：

npm install --save html2canvas

注意：如果是某些原因不能npm的话就直接把依赖包拷贝到node_modules就可以啦

html：

<div class="details-box" v-show="detailsFormShow">
        <div class="details-inner">
            <!-- 截图区域 -->
            <div ref="cutImageBox">
               	…………
            </div>
            <!-- 按钮部分 -->
            <div class="btns">
                <el-button
                    type="primary"
                    @click="saveImage"
                    size="small"
                    style="margin-right: 30px">保存为图片
                </el-button>
                <el-button type="primary" @click="detailsFormShow = false" size="small">关闭</el-button>
            </div>
        </div>
    </div>

script:

引入html2canvas

import html2Canvas from "html2canvas";

methods:

重点：这个方法除了ie浏览器基本都支持，但在ie是不能用的

//保存图片这个方法除了ie浏览器基本都支持
      saveImage() {
        // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
        html2canvas(this.$refs.creditQrCodeShare, {
          backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
          useCORS: true, //支持图片跨域
          scale: 1, //设置放大的倍数
        }).then((canvas) => {
          // 把生成的base64位图片上传到服务器,生成在线图片地址
          let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
          this.imgUrl = url;
          //将图片下载到本地
          console.log(url,67)
          let a = document.createElement("a"); // 生成一个a元素
          let event = new MouseEvent("click"); // 创建一个单击事件
          a.download = name || "截图名称"; // 设置图片名称没有设置则为默认
          a.href = this.imgUrl; // 将生成的URL设置为a.href属性
          a.dispatchEvent(event); // 触发a的单击事件
        });
      },

在网上查了好多资料好多是说用这个方法IE浏览器可以用，但我试了是不行的：

if (userAgent.includes("Trident")) {
                   let arr = image.split(',');
                   let mime = arr[0].match(/:(.*?);/)[1];
                   let bstr = atob(arr[1]);
                   let n = bstr.length;
                   let u8arr = new Uint8Array(n);
                   while (n--) {
                      u8arr[n] = bstr.charCodeAt(n);
                   }
                   window.navigator.msSaveBlob(new Blob([u8arr], {type: mime}), `${value}.jpg`);
               }

重点：想要在ie浏览器上用这个html2canvas来将html保存为图片并且在本地保存就要让后端来配合让其转为文件流来下载保存。可能写的有点儿乱，但如果是发现IE浏览器不能下载图片就跟后端商量用这个方式，其他的方法我都试过了都没用

1.//让后端写一个接口，你给它传`this.imgUrl`   转为base64位的参数。
   const htrs = window.location.host
   const pste = window.location.protocol
   const newRowder = `${pste}//${htrs}${baseURL}/ieriepf/sdfjjfbase64`
   let aLink = document.createElement("a");
    aLink.href = downloadUrl;
    aLink.download = `${downloadName}.jpg`;
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink);