前端实现将二进制文件流,并下载为excel文件

目录

一、关于二进制流

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

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

  • 常见的: Blob、ArrayBuffer、File、FileReader 和 FormData

  • 在浏览器中的样子如下:

二、项目实践

1、导入excel方法代码片段

javascript 复制代码
// 导入时,接口调用,失败后得到文件流
axios(url, {
	method: 'post',
	responseType: 'blob',
	url: '/api/import',
  	data: formData, // 导入文件一般都用FormData 格式数据
}).then(res => {
  if(res.code === 200) {
    // 导入成功
  } else {
    // 导入失败,需要将返回的文件流res.data进行转换
    this.downloadBinaryFile(res.data, '导入失败后下载的报错文件')
  }
})

2、二进制文件流转换成excel方法实现

javascript 复制代码
/**
 * 将二进制文件下载到本地,保存为excel文件
 * @param {*} binFile 二进制文件流
 * @param {*} fileName 下载后的文件名
 * @param {*} blobType 文件格式
 */
downloadBinaryFile(binFile, fileName, blobType="application/vnd.ms-excel") {
	const blobObj = new Blob([binFile], { type: blobType });
	const downloadLink = document.createElement('a');
	let url = window.URL || window.webkitURL || window.moxURL; // 浏览器兼容
	url = url.createObjectURL(blobObj);
	downloadLink.href = url;
	downloadLink.download = fileName;
	document.body.appendChild(downloadLink);
	downloadLink.click();
	document.body.removeChild(downloadLink);
	window.URL.revokeObjectURL(url);
}

参数说明:

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

三、常见问题及解决

问题:成功将文件流转换成了excel文件,并下载了,但是下载后的文件打不了!

原因:就是在上传文件调用服务端接口时,axios请求缺少:responseType: 'blob', 这个很重要!

responseType 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

  • arraybuffer:设置响应类型为二进制对象(返回的是一个包含二进制数据的 JavaScript ArrayBuffer 类型化数组)。

  • blob:设置响应类型为二进制对象(返回的是一个包含二进制数据的 Blob 对象)。

  • document: 设置响应类型为html document 或 xml document,具体根据接收到的数据的 MIME 类型而定。

  • json: 设置响应类型为json类型,日常开发中常用。

  • text:设置响应类型为text文本类型

相关推荐
想学习java初学者17 小时前
SpringBoot整合Fastexcel/EasyExcel导出Excel导出单个图片
excel
LAM LAB1 天前
【WPS】office邮件合并,怎么将数据源excel中的下一条拼接在文档中的下一个位置
excel·wps
SEO-狼术1 天前
Document Solutions for Excel, .NET
excel
Access开发易登软件2 天前
Access开发一键删除Excel指定工作表
服务器·前端·后端·excel·vba·access·access开发
Saggitarxm2 天前
Golang实现 - 实现只有表头的 Excel 模板,并在指定列添加了下拉框功能。生成的 Excel 文件在打开时,指定列的单元格会显示下拉选项
excel·下拉框选项序列·生成excel模板·下拉框选项
pk_xz1234562 天前
SAP全自动化工具开发:Excel自动上传与邮件通知系统
运维·人工智能·windows·深度学习·分类·自动化·excel
俊昭喜喜里3 天前
Excel——设置打印的区域
excel
开开心心就好4 天前
Excel数据合并工具:零门槛快速整理
运维·服务器·前端·智能手机·pdf·bash·excel
CodeCraft Studio4 天前
Aspose.Cells 应用案例:法国能源企业实现能源数据报告Excel自动化
自动化·excel·能源·aspose·aspose.cells·数据报告
人工智能训练师4 天前
将EXCEL或者CSV转换为键值对形式的Markdown文件
人工智能·excel