vue 前端通过后端返回的文件流,直接在浏览器下载文件（js）

LUNA~

已于 2024-11-26 15:02:22 修改

阅读量414

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

于 2024-10-12 14:29:54 首次发布

本文链接：https://blog.youkuaiyun.com/CMDN123456/article/details/142875206

JavaScript 专栏收录该内容

36 篇文章

订阅专栏

接口调用成功，返回的数据是这种样子（有两种数据）

前端js:

aa(){
        let param = { Id: val.val.MongodbIds, FileName: val.val.FileName };
        this.$luleApi
          .DownloadFileById(param)
          .then((res) => {
           //获取文件名称 三种写法，主要是看后端给你返回的，我这里就用第一种
            const fileName = JSON.parse(res.config.data).FileName; 
//const fileName = window.decodeURI(decodeURIComponent(decodeURI(res.headers['content-disposition'].split(`''`) [1])));
           //const fileName= res.headers['content-disposition'].split('filename=')[1]
            const url = window.URL.createObjectURL(new Blob([res.data])); // 创建一个Blob对象，包含响应的数据（文件内容）。
            const link = document.createElement("a"); // // 创建一个<a>元素，用于触发下载。
            link.href = url; // 设置<a>元素的href属性为Blob对象的URL。 
            link.setAttribute("download", fileName); // 设置<a>元素的download属性为文件名，这样浏览器就知道下载的文件应该叫什么名字。 
            document.body.appendChild(link);// 将<a>元素添加到文档的body中（虽然这一步不是必需的，但可以避免在某些浏览器中出现问题）。  
            link.click(); // 触发<a>元素的点击事件，开始下载。  
            document.body.removeChild(link);  // 下载完成后，从文档中移除<a>元素。
          })
          .catch((err) => {});
}

ps: 如果根据上述操作之后，下载的图片无法预览，可以修改以下位置

api.js**********************
//旧写法 
//DownloadFileById: (params) => {
   // return service.post("api/GridFS/DownloadFileById", params);
 // },

  // 修改之后的
  DownloadFileById: (config, params) => {
    return service.post("api/GridFS/DownloadFileById", params, config);
  },


a.vue

修改为：
Download(data) {
      let param = {
        Id: "67455ac4fe011820f0c1c8a6",
        FileName: "病人详情-实时监测(1).png"
      };

      this.$luleApi
        .DownloadFileById({ responseType: "arraybuffer" }, param)
        .then((res) => {
          console.log('下载=====', res);

          const fileName = JSON.parse(res.config.data).FileName;
          const blob = new Blob([res.data], { type: "application/octet-stream" });
          debugger
          const url = URL.createObjectURL(blob);
           console.log(url, "下载1");
          const link = document.createElement("a");
          link.href = url;
          link.download = fileName; 
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          URL.recycleObjectURL(url);
        })
        .catch((err) => { });
    },