下载后端返回的二进制文件

目录

一、问题

二、解决方法

三、总结


tiips:如嫌繁琐,直接移步总结即可!

一、问题

1.需要导出功能,后端已经返回了二进制文件,前端如何下载呢?

二、解决方法

1.数据类型转换:将后端的二进制数据转换为文件对象。

createObjectURL中第二个参数{type:'xxxx'}要和接口的返回数据类型responseType保持一致

javascript 复制代码
//后端接口
export const _exportPageData = (data) =>
request({
  url: '/test/borrow/export',
  method: 'post',
  responseType:'arraybuffer',
  data
})

//处理后端返回数据为文件对象,作为a标签的url
// type和上面接口的responseType最好要保持一致
let url=window.URL.createObjectURL(new Blob([result],{type:'arraybuffer'}))

2.body上添加a标签,href为转换好的Blob数据 url,点击a标签下载文件,最后删除文件

javascript 复制代码
//创建a标签
let link=document.createElement('a')
link.herf=url
link.downloda='已导出数据.xlsx';
//避免数据量过大,下载时间长,看到a标签
link.style.display = 'none';
//挂载a标签
document.body.appendChild(link)
//下载
link.click()
//移除a标签
document.body.removeChild(link)

//清除ObjectURL,释放内存
window.URL.revokeObjectURL(url);

3.完整代码如下:未选中数据导出全部;选中数据直接导出选中的数据

javascript 复制代码
//导出数据
//title:标题
//dataLength:导出数量为0时导出所有
//对于非arrayBuffer数据,需要传入config.type
export const exportData = ({ api, params }, dataLength, config) => {
    const getData = () => {
        return api(params)
            .then((result) => {
                //默认处理 ArrayBuffer数据
                if (result.byteLength) {
                    let url = window.URL.createObjectURL(new Blob([result], { type: config?.type || 'arraybuffer' }));
                    let link = document.createElement('a');
                    link.href = url;
                    link.style.display = 'none';
                    link.download = config?.title || '已导出数据.xlsx';
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link)
                    window.URL.revokeObjectURL(url);
                    Message({
                        type: 'success',
                        message: '导出成功!'
                    })
                    return result
                }
            })
            .catch((error) => {
                Message.error('导出失败')
                console.log("exportData error:", error)
            })
    }

    return new Promise(async (resolve, reject) => {
        let result = null;
        if (!dataLength) {
            result = await MessageBox.confirm('是否需要导出所有数据', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    return getData()
                })
                .catch(() => {
                    return;
                })
        } else {
            result = await getData()
        }
        resolve(result)
    })

}

//调用方法
// exportData({api:_exportPageData,params},idsList.value.length,{title:"test.xlsx"})
// ?.then((result)=>{
//     console.log("result",result)
// })

三、总结

1.后端返回二进制数据前端下载:1)转换为文件对象; 2)a标签配置href属性(数据源),download属性(文件名称),下载,移除a标签

2.window.URL.createObjectURL() 创建一个指向给定参数的File对象或Blob对象存储在内存中,直到document被卸载时才清除;所以如果有多次调用的情况,避免内存溢出,提高新能需要 手动使用 window.URL.revokeObjectURL(url)清除

3.诶,记忆不如写下来,不写又忘了。

/*

希望对你有帮助!

如有错误,欢迎指正,非常感谢!

*/

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据5 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
334554325 小时前
element动态表头合并表格
开发语言·javascript·ecmascript