vue下载文件流生成图片

星星散落人间

已于 2022-12-08 11:44:55 修改

阅读量733

点赞数

分类专栏： vue vue2 文章标签： vue.js javascript 前端

于 2022-12-06 10:43:01 首次发布

本文链接：https://blog.csdn.net/future_1_/article/details/128198446

版权

vue 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

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

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,
  },
]