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文本类型

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/144787.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Acwing Hash表

哈希表的作用&#xff1a;把一个比较大的空间&#xff0c;通过一个函数映射到一个比较小的空间 一般做哈希运算时&#xff0c;取一个质数作为模&#xff0c;会使得冲突的概率降低。 哈希表的冲突解决方法&#xff1a; 拉链法开放寻址法 下面详细介绍这两种方法的原理及其实现…

自制网络连接工具(支持tcpudp,客户端服务端)

自制网络连接工具&#xff08;支持tcp/udp,客户端/服务端&#xff09; 将网络连接工具制作成共享库 network.h #ifndef NETWORK_H #define NETWORK_H#include<netinet/in.h> #include<sys/socket.h> #include<stdbool.h> typedef struct Network {int type…

JAVA基础:包装类,BigInteger , BigDecimal

1 包装类 java是一种面向对象的编程语言 对象都是由类产生的。 8种基本类型对java面向对象的特性有所破坏 jdk就提供了8种基本类型所对应的类的表示&#xff0c;称为&#xff1a;包装类 理论上来讲&#xff1a;类属性使用包装类定义&#xff0c;方法中的局部变量使用基本类型…

javamail发邮件:配置SMTP发送邮件的步骤?

javamail发邮件的教程指南&#xff1f;怎么用JavaMail发送邮件&#xff1f; JavaMail API 是 Java 平台上用于发送和接收电子邮件的标准 API&#xff0c;它提供了一套丰富的类和方法&#xff0c;使得开发者能够轻松地实现邮件发送功能。AokSend将详细介绍如何使用 JavaMail AP…

基于atlas环境下YOLOV7的睡岗识别

做到这里&#xff0c;其实只是想探索下新的检测框架、探索下atlas下ACL的推理方式。整个过程持续了3-4周把&#xff0c;回顾一下&#xff0c;感觉还是需要一些技巧才能拿下&#xff0c;如果没有任何经验的是断难搞定此代码的。主要基于华为的官方例子&#xff0c;里面修改了原始…

峟思科普:溢流坝是什么?溢流坝承载着哪些作用

水坝系统中的一项关键组成部分——溢洪结构&#xff0c;又常被称作溢洪道&#xff0c;其独特功能在于精准调控水库水位&#xff0c;确保水坝安全。当水库蓄水量超过预设阈值&#xff0c;该结构能够引导多余水流平稳穿越坝体&#xff0c;注入下游河床。此过程中&#xff0c;坝前…

Snapchat API 访问:Objective-C 实现示例

Snapchat 是一个流行的社交媒体平台&#xff0c;它允许用户发送和接收短暂存在的图片和视频。对于开发者来说&#xff0c;访问 Snapchat API 可以为应用程序添加独特的社交功能。本文将介绍如何在 Objective-C 中实现对 Snapchat API 的访问&#xff0c;并提供一个详细的代码示…

uni-app页面调用接口和路由(四)

文章目录 一、路由二、页面调用接口二、路由跳转1.uni.navigateTo(OBJECT)2.uni.redirectTo(OBJECT)3.uni.reLaunch(OBJECT)4.uni.switchTab(OBJECT)5.uni.navigateBack(OBJECT) 总结 一、路由 路由配置 uni-app页面路由为框架统一管理&#xff0c;开发者需要在pages.json里配…

yolo自动化项目实例解析(四)ui页面整理1 (1.85)

我们在上一章整理main.py 的if __name__ __main__: 内容还留下面这一段&#xff0c; from PyQt5.QtWidgets import *from lanrenauto.moni.moni import *from PyQt5.QtGui import *app QApplication(sys.argv) # 初始化Qt应用ratio screen_width / 2560 # 分辨率比例# 设…

centos 安装VNC,实现远程连接

centos 安装VNC&#xff0c;实现远程连接 VNC(Virtual Network Computing)是一种远程控制软件&#xff0c;可以实现通过网络远程连接计算机的图形界面。 服务器安装VNC服务 yum install -y tigervnc-server*启动VNC服务&#xff0c;过程中需要输入连接密码 vncserver :1查看…

全国网安众测招募计划启动啦,欢迎加入~

在数字化时代&#xff0c;网络安全已成为维护社会稳定、促进经济发展的基石。为了积极响应国家关于加强网络安全工作的号召&#xff0c;确保某区域关键信息系统的稳固运行&#xff0c;我们特此启动一项网络安全众测活动。该活动旨在通过汇聚业界有经验的网络安全攻防人才&#…

RetrievalAttention——提高 LLM 处理长上下文的效率

概述 论文地址&#xff1a;https://arxiv.org/abs/2409.10516 本文的研究背景主要是为了解决 "具有长语境的大型语言模型&#xff08;LLM&#xff09;"问题。基于变换器的 LLM 被广泛应用于各个领域&#xff0c;但在处理长上下文时&#xff0c;其计算成本非常高。特…

电脑USB端口禁止软件有哪些?什么软件能指定USB端口禁用?分享四款好用软件!

想象一下&#xff0c;你正准备在办公桌上插入U盘&#xff0c;打算快速拷贝文件&#xff0c;突然系统蹦出一个警告&#xff1a;“这个USB端口已被禁用&#xff01;” 是不是感觉好像被一双隐形的手制止了&#xff1f; 其实&#xff0c;这双“隐形的手”就是专门为企业安全设计…

visionpro脚本

visionproToolBlock的脚本的优先级优于工具连线的优先级&#xff0c;一般是照着脚本的执行顺序进行执行对应的工具&#xff0c;最常用的是C#的高级脚本&#xff0c;C#的脚本如下分为5部分。 第一部分&#xff1a;主要是一些库的引用&#xff0c;对于有些类型不知道库的时候&…

vue2中字符串动态拼接字段给到接口

【设计初衷是用户可根据给定的字段进行准确描述】 实现功能&#xff1a; 1. 文本域内容串动态配置字段&#xff0c;以$ {英文}拼接格式给到接口。 &#xff08;传参如&#xff1a;$ {heat_status_code}正常&#xff0c;$ {wdy_temp}也正常&#xff01;&#xff09; 2. 编辑时根…

Instagram全面升级“青少年账号”保护措施,除了信息分类过滤,还应从根源加强内容审核

在持续多年的监管和诉讼压力下&#xff0c;作为社交网站的巨头&#xff0c;Instagram落实了“最严格的青少年用户保护法”。 Instagram 上所有未满 18 岁的用户都将被归为“青少年用户”&#xff0c;默认把账号设置为私密状态&#xff0c;自动实施多项防护措施&#xff0c;很多…

Vue3实战:使用 errorHandler 捕获全局错误

你好同学&#xff0c;我是沐爸&#xff0c;欢迎点赞、收藏、评论和关注。 在 Vue3 中&#xff0c;app.config.errorHandler 是一个错误处理器&#xff0c;用于为应用内抛出的未捕获错误指定一个全局处理函数&#xff0c;它接收三个参数&#xff1a;错误对象、触发该错误的组件…

什么品牌超声波清洗机质量好?四大绝佳超声波清洗机品牌推荐!

在快节奏的现代生活中&#xff0c;个人物品的清洁卫生显得至关重要。眼镜、珠宝饰品、手表乃至日常餐厨用具&#xff0c;这些频繁接触的物品极易累积污渍与细菌。拿眼镜为例&#xff0c;缺乏定期清洁会让油渍与尘埃积累&#xff0c;进而成为细菌的温床&#xff0c;靠近眼睛使用…

人脸识别系统+电插锁安装配置过程

一、适用场景 1、各住宅小区内&#xff0c;一个单元涉及多户&#xff0c;一楼安装公共的人脸识别门禁进行身份的认证。 2、某企业的职工住宅区&#xff0c;企业统一安装人脸识别门禁认证身份。 3、自建楼栋&#xff0c;分多间出租给住户时&#xff0c;每个住户配备电子钥匙存在…

GEE使用require函数调用自己的Js库

新建了一个repository&#xff0c;名为Lib 把我的地形校正的函数放了进去 在自己的代码中调用就用到这个路径&#xff0c;主要Lib后面用冒号