后端返回blob文件流，前端下载文件的整个过程

最新推荐文章于 2024-08-25 23:35:37 发布

GuaX

最新推荐文章于 2024-08-25 23:35:37 发布

阅读量2.5k

点赞数

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

本文链接：https://blog.csdn.net/m0_37714008/article/details/125319803

版权

本文介绍如何处理后端通过API返回的blob文件流，在前端实现文件下载。详细阐述了在index.vue中接收后端数据，report.js中定义的API接口，以及download.js中用于转换和触发下载的辅助函数。

摘要由CSDN通过智能技术生成

一、index.vue

<template>
   <el-button @click="doDownload(row)" type="text" size="small" v-double-click>
      <svg-icon icon-class="download-1" class="upload-color" />
   </el-button>
</template>
<script>
import { download } from '@/utils/download';
import { downRpt } from '@/api/report';
export default {
  name: '',
  components: { },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 下载
    doDownload(row) {
      // console.log(row);
      if (!row.rstPath) {
        messageTip({ message: '还未生成报告', type: 'error' });
        return;
      }
      downRpt({ rstPath: row.rstPath })
        .then(res => {
          download(res, res.fileName);
        })
        .catch(() => {});
    },
  }
};
</script>

1）downRpt后台返回结果：