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

字节尚未跳动

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

阅读量444

点赞数 1

CC 4.0 BY-SA版权

文章标签： 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>