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')
}
相关推荐
ohMyGod_1233 分钟前
React16,17,18,19新特性更新对比
前端·javascript·react.js
@大迁世界6 分钟前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku9 分钟前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员13 分钟前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句14 分钟前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿15 分钟前
Web第二次笔记
前端·javascript
Dream耀20 分钟前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
洋流21 分钟前
0基础进大厂,第12天:ES6语法基础篇
javascript
I'm写代码24 分钟前
el-tree树形结构笔记
javascript·vue.js·笔记
UrbanJazzerati26 分钟前
使用Excel制作多类别占比分析字母饼图
excel