js实现blob类型转化为excel文件

需求

后端通过接口将excel文件通过blob类型数据进行返回,前端接收数据并将其转化为excel文件进行下载

实现

接口方法

responseType:值为blob,标记返回数据类型为blob

Content-Type:请求头设置,值为application/vnd.ms-excel,标记类型为excel文件

javascript 复制代码
// request为项目内部封装
export const getDownLoadUrl = () => {
    return request({
        url: '/aiModel/superModel/superModelImportTemplate',
        method: 'get',
        responseType: 'blob',
        headers: {
            'Content-Type': 'application/vnd.ms-excel'
        }
    })
}

转化方法

创建blob类型对应的url对象挂载到链接上,并模拟点击链接方式进行excel文件下载

javascript 复制代码
export function downloadBlob(blob, name) {
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = name
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url) // 释放对象
}

调用逻辑

使用上述实现的两个方法,从接口获取blob后将其转化为excel文件下载

javascript 复制代码
const download = async() => {
    const res = await getDownLoadUrl()
    downloadBlob(res, 'excel模板.xlsx')
}
相关推荐
南屿im3 分钟前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
JustHappy5 分钟前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心5 分钟前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试
程序员小羊!12 分钟前
Java教程:JavaWeb ---MySQL高级
java·开发语言·mysql
归于尽14 分钟前
Generator?从 yield 卡壳,到终于搞懂协程那点事
前端·javascript
FogLetter14 分钟前
React组件开发进阶:本地存储与自定义Hooks的艺术
前端·javascript·react.js
m0_7231402319 分钟前
Python训练营-Day49
开发语言·python
GISer_Jing22 分钟前
前端开发—全栈开发
前端·javascript
DoraBigHead31 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
wtsolutions32 分钟前
Excel to JSON API by WTSolution Documentation
json·excel·api·wtsolutions