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')
}
相关推荐
lly20240643 分钟前
AJAX JSON 实例
开发语言
QiZhang | UESTC1 小时前
JAVA算法练习题day27
java·开发语言·c++·算法·leetcode·hot100
坚持就完事了1 小时前
2-C语言中的数据类型
c语言·开发语言
ss2731 小时前
手写MyBatis第96弹:异常断点精准捕获MyBatis深层BUG
java·开发语言·bug·mybatis
Stanford_11062 小时前
关于嵌入式硬件需要了解的基础知识
开发语言·c++·嵌入式硬件·微信小程序·微信公众平台·twitter·微信开放平台
星秀日2 小时前
JavaWeb--Ajax
前端·javascript·ajax
白水先森2 小时前
Python 运算符与列表(list)
java·开发语言
小政同学2 小时前
【Python】小练习-考察变量作用域问题
开发语言·python
嫂子的姐夫3 小时前
10-七麦js扣代码
前端·javascript·爬虫·python·node.js·网络爬虫
是那盏灯塔3 小时前
16.C++三大重要特性之多态
开发语言·c++