vue将后端返回的文件流导出成文档_vue从respose里面拿到文件输出流生成文件-优快云博客

本文链接：https://blog.youkuaiyun.com/LingSnow1019/article/details/115521675

本文介绍了如何使用JavaScript通过axios封装一个导出Excel的方法，包括设置请求头、构造URL并处理响应，以实现文件下载。示例展示了如何在页面中导入该方法并调用它以导出数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建一个js文件,封装导出的接口,里面的内容如下

// 导出Excel公用方法
import axios from 'axios'
export function exportMethod(data) {
  axios({
      method: data.method,
      url: `${data.url}${data.params ? '?' + data.params : ''}`,
      responseType: 'blob'
  }).then((res) => {
      const link = document.createElement('a')
      let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      link.download = data.fileName //下载的文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
  }).catch(error => {
      this.$message.error('网络错误')
      console.log(error)
  })
}

2.在需要使用的页面中引入

import { exportMethod } from "../../utils/exportMethod.js";

3.使用

    handleAddClick() { //点击导出调封装好的方法
    let myObj = {
      method: "get",
      url: "",
      fileName: this.formatTime(new Date(), "yyyy-MM-dd hh-mm"), //下载好的文件名称，我这里是用的当前时间
      params:``, //接口参数
    };
    exportMethod(myObj);
  },