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')
}
相关推荐
.生产的驴7 分钟前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
bin915324 分钟前
AI工具赋能Python开发者:项目开发中的创意守护与效率革命
开发语言·人工智能·python·工具·ai工具
被放养的研究生27 分钟前
Python常用的一些语句
开发语言·python
艾小码27 分钟前
ES6+革命:8大特性让你的JavaScript代码质量翻倍
前端·javascript
两个西柚呀31 分钟前
Vue组件的一些底层细节
前端·javascript·vue.js
fox_lht2 小时前
第一章 不可变的变量
开发语言·后端·rust
骁的小小站3 小时前
Verilator 和 GTKwave联合仿真
开发语言·c++·经验分享·笔记·学习·fpga开发
一路向北⁢5 小时前
基于 Apache POI 5.2.5 构建高效 Excel 工具类:从零到生产级实践
java·apache·excel·apache poi·easy-excel·fast-excel
心灵宝贝6 小时前
申威架构ky10安装php-7.2.10.rpm详细步骤(国产麒麟系统64位)
开发语言·php
lly2024066 小时前
PHP 字符串操作详解
开发语言