excel导出-将后端返回的文件流导出为excel

在最近的vue项目开发中,有实现一个功能:点击导出按钮,请求后端接口,需要将后端返回的文件流导出为exel格式的。实现这个功能的过程中本来我是用form action实现,但是form action中带的参数是拼接到url上面的,参数过长,请求会报414错误,我大概查了一下是因为参数过长的原因。所以我采用直接axios post请求来实现。
首先在utils.js里面声明exportMethod函数,该函数的作用是通过发axios post请求后端导出接口,请求成功后:

1. 在成功函数里面先新建一个a标签:

const link = document.createElement('a');

2. 然后new一个Blob对象(是一个可以存储二进制文件的容器)

let blob = new Blob([res.data], {type: 'application/x-excel'});

let blob = new Blob(arr[optional], options[optional]) 
第一个参数为一个数据序列,可以是任意格式的值
第二个参数用于指定将要放入Blob中的数据的类型,比如:type: 'application/x-excel' 或 type: 'text/plain'

3. 通过URL.createObjectURL()方法通过传入的参数(参数:用于创建url的file对象,Blob对象或者MediaSource对象),创建一个指向该参数对象的URL,绑定到创建a标签的href属性上,

link.style.display = 'none';
link.href = URL.createObjectURL(blob);
link.download = data.fileName;

4. 然后往body上面append这个a标签,并执行a标签的点击事件,进行文件的导出,最后导出成功后,要记得把a标签从body上面移除。

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

整个的实现代码如下:
utils.js中添加exportMethod函数:

exportMethod(data) {
        axios({
            method: data.method,
            url: data.url,
            data: data.params,
            responseType: 'blob'
        }).then((res) => {
            const link = document.createElement('a');
            let blob = new Blob([res.data], {type: 'application/x-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.$Notice.error({
                title: '错误',
                desc: '网络连接错误'
            });
        });
    }


在调用的组件中引入utils.js文件:

import utils from 'utils/utils.js';

<div class="statement-detail-exportbtn">
    <button class="veui-button"
            @click="exportExcel">
        <span>导出</span>
    </button>
</div>

exportExcel() {
    let data = {
        method: 'post',
        url: this.exportUrl,
        fileName: this.id+' 结算单详情.xlsx',
        params: {
            settlementId: this.id
        }
    };
    utils.exportMethod(data);
}

### 实现前端导出 Excel 功能 为了实现在前端接收到后端返回的文件并将其作为 Excel 文件导出,可以采用如下方式: #### 使用 JavaScript 进行文件下载操作 当从服务器获取到二进制流形式的数据时,可以通过创建一个临时的 `<a>` 标签来触发浏览器默认的下载行为。下面是一个具体的实现方案。 ```javascript // 定义用于下载文件的方法 function downloadFile(blobData, fileName) { const blob = new Blob([blobData], { type: "application/vnd.ms-excel;charset=utf-8" }); if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE兼容处理 navigator.msSaveBlob(blob, fileName); } else { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = fileName; document.body.appendChild(link); link.click(); setTimeout(() => { URL.revokeObjectURL(link.href); // 清理内存中的对象url document.body.removeChild(link); // 移除动态创建的<a>标签 }, 100); } } ``` 此段代码定义了一个名为 `downloadFile` 的函数,它接受两个参数:一个是来自服务端响应体内的二进制数据(即文件内容),另一个是要保存下来的文件名称[^1]。 #### 发起 HTTP 请求并与上述方法结合使用 接下来展示如何通过发起 GET 或 POST 请求向服务器请求特定资源,并利用上面提到的辅助工具完成实际的文件下载过程。 ```javascript async function exportExcel() { try { let response = await axios({ url: "/api/export/excel", // 替换成真实的API路径 method: 'GET', responseType: 'blob', // 设置responseType为'blob' params: {} // 如果有查询条件可在此处设置 }); if (!response || !response.data) throw Error("Failed to fetch data"); // 调用之前编写的downloadFile函数执行下载动作 downloadFile(response.data, "example.xlsx"); } catch(error){ console.error("Error occurred during exporting excel:", error.message); } } ``` 这段脚本展示了怎样发送 AJAX 请求给指定的服务地址 `/api/export/excel` 来获得目标文档的内容;一旦成功取得回应,则立即调用前面介绍过的 `downloadFile()` 函数来进行最终的文件保存工作[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值