当前位置: 首页 > news >正文

js 将二进制文件流,下载为excel文件

吃西瓜

现成的粒子

二进制流,是一种计算机文件格式,它的数据以二进制形式存储,与文本文件不同,

二进制文件可以包含任意类型的数据,例如:图像、音频、视频、可执行文件、压缩文件等,而文本文件则仅仅包含 ASCII 码或其他编码的字符数据。

  • 常见的: ‘Blob、ArrayBuffer、File、FileReader 和 FormData’
  • 在浏览器中长这样:
    在这里插入图片描述



blobType 指的是,服务端返回的 Content-Typemine-type
常用的excel类型一般有2种:application/vnd.ms-excelapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet

如:
在这里插入图片描述


export const filmOrderExcelOut = (parameter: Record<any, any>) => {return request({method: 'post',url: Api.filmOrderExcelOut,data: parameter,responseType: 'blob'   `【一定得加这个】`})
}--------------------------------------------------------------------// 导出表格
const exportExcel = async () => {try {let { data } = await orderApi.filmOrderExcelOut(searchParams.value)let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })let file = new File([blob], '订单.xlsx', {lastModified: new Date() as any,type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})// console.log('file=', file)const a = document.createElement('a')a.style.display = 'none'document.body.appendChild(a)const url = URL.createObjectURL(file)a.href = urla.download = file.namea.click()// 清理document.body.removeChild(a)URL.revokeObjectURL(url)} catch (error) {message.error('网络请求发送失败~')}
}

出错的地方

  • 问题:成功将文件流转换成了excel文件,并下载了,但是下载后的文件打不了!!!
  • 原因:就是因为请求接口时,少了这个 responseType: 'blob' 配置项
export const filmOrderExcelOut = (parameter: Record<any, any>) => {return request({method: 'post',url: Api.filmOrderExcelOut,data: parameter,responseType: 'blob'   `【一定得加这个】`})
}`responseType`:表示,服务器响应的数据类型,可以是 'arraybuffer''blob''document''json''text''stream'
  • arraybuffer:设置响应类型为二进制对象【返回的是一个包含二进制数据的 JavaScript ArrayBuffer 类型化数组】
  • blob:设置响应类型为二进制对象【返回的是一个包含二进制数据的 Blob 对象】
  • document: 设置响应类型为html document 或 xml document,具体根据接收到的数据的 MIME 类型而定
  • json: 设置响应类型为json类型,日常开发中常用
  • text:设置响应类型为text文本类型

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 直接插入排序(C语言实现)
  • Spring 源码解读:手动实现Spring事件机制
  • 深入解析:HTTP 和 HTTPS 的区别
  • 2024年数学建模比赛题目及解题代码
  • Xv6异常处理(二):内核异常
  • 练习题 - Django 4.x Models Meta 元数据选项
  • 电竞显示器哪个牌子好
  • DNS攻击频发,打造防劫持DNS需强化“数据治理”理念
  • 探索Facebook的黑暗面:数字化社交的双面剑
  • 了解Node开发基础知识
  • Python--TCP/UDP通信
  • 使用gitee如何回滚上一个版本,简单操作方式-gitee自带功能无需使用代码
  • P9235 [蓝桥杯 2023 省 A] 网络稳定性
  • 【动态规划】下降路径最小和 C++
  • 互联网全景消息(5)之RocketMq快速入门(下)
  • (三)从jvm层面了解线程的启动和停止
  • [nginx文档翻译系列] 控制nginx
  • Fastjson的基本使用方法大全
  • iOS帅气加载动画、通知视图、红包助手、引导页、导航栏、朋友圈、小游戏等效果源码...
  • JAVA_NIO系列——Channel和Buffer详解
  • Javascripit类型转换比较那点事儿,双等号(==)
  • JDK 6和JDK 7中的substring()方法
  • jQuery(一)
  • magento2项目上线注意事项
  • MD5加密原理解析及OC版原理实现
  • 构建工具 - 收藏集 - 掘金
  • 免费小说阅读小程序
  •  一套莫尔斯电报听写、翻译系统
  • 用Visual Studio开发以太坊智能合约
  • 追踪解析 FutureTask 源码
  • 蚂蚁金服CTO程立:真正的技术革命才刚刚开始
  • ​​​​​​​Installing ROS on the Raspberry Pi
  • ​​快速排序(四)——挖坑法,前后指针法与非递归
  • ​软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】​
  • ## 临床数据 两两比较 加显著性boxplot加显著性
  • #define,static,const,三种常量的区别
  • #pragma pack(1)
  • (bean配置类的注解开发)学习Spring的第十三天
  • (java)关于Thread的挂起和恢复
  • (补充)IDEA项目结构
  • (附源码)springboot车辆管理系统 毕业设计 031034
  • (官网安装) 基于CentOS 7安装MangoDB和MangoDB Shell
  • (回溯) LeetCode 40. 组合总和II
  • (力扣记录)1448. 统计二叉树中好节点的数目
  • (三)elasticsearch 源码之启动流程分析
  • (四)库存超卖案例实战——优化redis分布式锁
  • (五)网络优化与超参数选择--九五小庞
  • .gitignore不生效的解决方案
  • .NET CF命令行调试器MDbg入门(三) 进程控制
  • .NET WPF 抖动动画
  • .net6Api后台+uniapp导出Excel
  • .NET学习全景图
  • .NET中的Exception处理(C#)
  • @RunWith注解作用
  • @zabbix数据库历史与趋势数据占用优化(mysql存储查询)