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')
}
相关推荐
遂心_11 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_12 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy12 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy12 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子13 小时前
迭代器和生成器
前端·javascript
源猿人16 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin16 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖18 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬18 小时前
Promise 的场景和最佳实践
前端·javascript
Asort18 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript