vue下载文件流生成图片

点击下载-----向后台发出请求-----后台返回图片的文件流-----转为图片-----下载图片

1. template 

<template>
  <div>   
    <el-button type="primary" size="mini" @click="downLoadImgs"
          >照片下载</el-button>

    <div v-for="infoImg in photoList" :key="infoImg.id">
      <el-checkbox-group v-model="checkList">
          <el-checkbox :label="infoImg">
               <img :src="infoImg.imageUrl" alt="" /> 
          </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

2.script

data() {
    return { 
      checkList: [], 
    };
  },
methods: {
    downLoadImgs() {
      this.$confirm("确定下载影像吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 单张图片循环下载
          this.checkList = this.checkList.map(({ path }) => {
            this.$request("downloadImg", { Key: path }).then((res) => {
              const blob = new Blob([res.data]);
              const fileName = "qudaoerweima.jpg";
              if ("download" in document.createElement("a")) {
                // 非IE下载
                const dlink = document.createElement("a");
                dlink.download = fileName;
                dlink.style.display = "none";
                dlink.href = URL.createObjectURL(blob);
                document.body.appendChild(dlink);
                dlink.click();
                URL.revokeObjectURL(dlink.href); // 释放URL 对象
                document.body.removeChild(dlink);
              } else {
                // IE10+下载
                navigator.msSaveBlob(blob, fileName);
              }
              this.$message.success("下载影像成功");
            });
          });
        })
        .catch(() => {});
    },
}

3.api.js

  
export default [
{
    /** 下载图片 **/
    name: "downloadImg",
    url: "/api/Download",
    method: "get",
    responseType: "blob", // 下载文件流
    // pem: true,
  },
]

4.结果