【Vue2 Vue3 TypeScript】文件导出获取后端返回文件流

字节尚未跳动

已于 2024-04-14 14:44:03 修改

阅读量129

点赞数 1

文章标签： vue.js javascript 前端

于 2024-03-23 10:58:18 首次发布

本文链接：https://blog.csdn.net/m0_65563175/article/details/136962758

版权

Vue2 + Element UI

<script>
import axios from 'axios';

export default {
    methods: {
        handleExport() {
          axios({
            method: '请求方法类型',
            url: '后端路径',
            responseType: 'blob'
          }).then((res) => {
            // 创建 a 标签元素
            const link = document.createElement('a');
            // 创建下载的链接
            const url = window.URL.createObjectURL(new Blob([res.data]));
            link.href = url;
            // 获取文件名称
            const filename = res.headers['content-disposition'].split('=')[1];
            link.setAttribute('download', decodeURI(filename));
            // 下载
            document.body.appendChild(link);
            link.click();
            // 下载后移除元素
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
            // 信息提示
            this.$message.success('文件导出成功');
          })
        },
    }
}
</script>

Vue3 + Ts + Element Plus

/** 此处的 request 是引入 axios 的实例 */
export function exportExcel() {
    return request({
        url: `/export`,
        method: "get",
        responseType: "blob",
    });
}

<script setup lang="ts">
import { exportExcel } from "@/api/xxx"

// 导出
const exportExcelButton = async () => {
  const resp = await exportExcel();
  // 创建 a 标签元素
  const link = document.createElement('a');
  // 创建下载的链接
  const url = URL.createObjectURL(new Blob([resp.data]));
  link.href = url;
  // 获取文件名称
  const filename = resp.headers['content-disposition'].split('=')[1];
  link.setAttribute('download', decodeURI(filename));
  // 下载
  document.body.appendChild(link);
  link.click();
  // 下载后移除元素
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
  // 信息提示
  ElMessage.success("文件导出成功");
}
</script>