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

字节尚未跳动

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

阅读量425

点赞数 1

文章标签： vue.js javascript 前端

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

本文链接：https://blog.youkuaiyun.com/m0_65563175/article/details/136962758

版权

文章介绍了在Vue2.x中使用axios进行文件导出的示例，以及如何在Vue3.x结合TypeScript和ElementPlus实现类似功能，包括请求处理和下载文件的详细步骤。

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

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);
            // 信息提示

最低0.47元/天解锁文章