导出excel文件 ——(从接口获取、纯前端导出、解析excel)

45 篇文章 0 订阅

前言

操作文件流,第一个想到肯定是new FileReader(),这次涉及到一个Blob对象,它是原始数据的类似文件对象。FileReader对象操作的就是Blob对象。

从接口获取文件,并下载

这里有两种都能实现,左边是更正确的,axios请求的时候就要指定返回的类型是blob类型,是不需要再new一个对象。我们用FileReader处理res,得到一个base64字符串,赋给a标签来实现下载。
(当然如果是几乎不带参数、速度很快的接口。可以直接window.open(url) )

在这里插入图片描述

axios({
	 method: 'get',
	 url: DOMAIN + '/studentRenewFeeQuery/renewedExport',
	 params: opt,
	 withCredentials: true,
	 // responseType: 'blob'  
	 // Blob 对象表示一个不可变、原始数据的类文件对象(File 接口都是基于Blob)
	}).then(res => {
	 // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
	 const fileReader = new FileReader()
	 // 开始读取指定的Blob中的内容。
	 //读取完成result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
	 fileReader.readAsDataURL(res.data)
	 // 处理load事件,该事件在读取操作完成时触发
	 fileReader.onload = (event) => {
	     let a = document.createElement('a')
	     a.download = `sss.xls`  //下载后文件名
	     a.href = event.target.result
	     document.body.appendChild(a) //插入a标签
	     a.click()
	     document.body.removeChild(a)  //移除a标签
	 }
	 this.$message.success('导出成功')
   })

纯前端实现导出

只需要后端提供普通的、常用JSon。内容点下面链接吧。

a=[
	{name:'张三',age:22}{name:'小王吧',age:40}
]

本人另外篇文章,点这儿

解析Excel

点这…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值