js 下载 后台传过来的excle 流

ajax 不能 实现 下载流的 功能,于是这么写即可

function downLoadExcle(url,data) {
    let timestamp = new Date().getTime();
    let xmlResquest = new XMLHttpRequest();
    xmlResquest.open("POST", url, true);//post请求,根据路径和参数下载

    xmlResquest.setRequestHeader("Content-type", "application/json");
    xmlResquest.responseType = "blob";
    xmlResquest.onload = function (oEvent) {
        let content = xmlResquest.response;
        let elink = document.createElement("a");
        elink.download = timestamp + ".xlsx";
        elink.style.display = "none";
        let blob = new Blob([content]);
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
    };
    xmlResquest.send(data);//传递参数
}

 

在 Java 后台返回 Excel 文件字节的情况下,Vue 前端可以通过处理响应数据并使用 `Blob` 对象实现文件下载。具体实现方式如下: ### 1. 配置 Axios 请求 在 Vue 中使用 `axios` 发送请求时,需要将 `responseType` 设置为 `'blob'` 或 `'arraybuffer'`,以确保正确接收文件数据。例如: ```javascript this.axios.post(baseUrl, Params, { responseType: "arraybuffer" }).then(response => { let list_name = "提现"; this.export_excel_file(response, list_name); }); ``` 通过此方式可以获取后台返回的二进制数据,为后续处理提供基础支持[^1]。 ### 2. 使用 Blob 对象处理文件 接收到响应数据后,可以通过 `Blob` 对象封装数据,并创建下载链接。以下是实现代码: ```javascript export const $export = (url, data, name) => { let opt = { url: url, method: 'post', responseType: 'blob', data: data }; axios.request(opt).then(res => { const BLOB = res.data; const fileReader = new FileReader(); fileReader.readAsDataURL(BLOB); fileReader.onload = (event) => { let a = document.createElement('a'); a.download = `${name}.xls`; a.href = event.target.result; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; }); }; ``` 该方法通过 `FileReader` 将 `Blob` 数据转换为 Base64 字符串,并通过动态创建的 `<a>` 标签触发下载操作[^2]。 ### 3. 使用 URL.createObjectURL 创建临时链接 另一种更高效的方式是直接使用 `URL.createObjectURL`,无需将数据转换为 Base64。以下是具体实现: ```javascript exportExcel() { let param = { params: { // 请求条件 } }; exportExcel(param).then(res => { if (res.data.type) { const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); let link = document.createElement('a'); link.style.display = 'none'; link.href = URL.createObjectURL(blob); link.setAttribute('download', '导出excel文件.xlsx'); link.click(); link = null; this.$message.success('导出成功'); } else { this.$message.warning(res.data.msg); } }).catch(err => { this.$message.error("下载失败"); }); } ``` 通过 `URL.createObjectURL` 可以直接创建临时链接,避免了额外的转换步骤,提高了性能[^3]。 --- ### 注意事项 - **文件类型匹配**:前端 `Blob` 的 `type` 应与后台返回的文件类型一致,如 `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` 或 `application/vnd.ms-excel`。 - **错误处理**:在请求失败时,应提供用户友好的提示信息,例如通过 `this.$message.error` 显示错误信息。 - **跨域问题**:如果前后端部署在同的域上,需要配置 CORS 以允许文件下载。 - **文件名称**:文件名称可以由后端返回,也可以在前端动态生成,确保下载文件的可识别性。 --- ### 相关问题 1. 如何在 Vue 中处理文件并实现文件预览? 2. 前端如何从响应头中获取文件名并用于下载操作? 3. 如何在 JavaScript 中使用 `fetch` 实现文件下载? 4. 如何解决前端下载文件时出现的乱码问题?
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值