前端导出文件 前端导出excel表格 下载文件

导出文件的过程

前端发请求, 后端处理后返回文件流, 前端通过Blob解析并下载

实现过程:

前端发请求

需要将响应类型更改为 arraybufferblob
不设置响应类型会导致下载的文件看起来乱码
解决前端导出文件乱码(设置响应类型)
responseType: 'arraybuffer'responseType: 'blob'
以常用的请求库axios为例(有可能你的项目对 axios 进行了二次封装, 你需要找到 options 来配置 )

get请求写法

axios.get(url, {
  params: form,
  responseType: 'arraybuffer'
  // responseType: 'blob'
})

post请求写法

axios.post(url, params, {
  responseType: 'arraybuffer'
  // responseType: 'blob'
})

后端处理返回文件流

在这里插入图片描述

前端通过Blob对象解析并下载

文件名和文件类型建议用后端返回的数据, 一般会放在响应头

在这里插入图片描述
文件名和类型的信息存放在 content-dispositioncontent-type

文件名为中文的时候, 后端一般会转码前端可以使用decodeURIComponent解码
解析并下载
按照上图返回的结构, 以axios为例处理, res为请求成功后后端返回数据的参数
let filename = decodeURIComponent(
	res.headers['content-disposition'].split(';')[1].split('=')[1]
)
// let filename = '导出表格.xlsx' // 可以, 但不建议直接写文件名
let fileType = decodeURIComponent(res.headers['content-type'])
let blob = new Blob([res.data], {
    type: fileType
    // type: 'application/vnd.ms-excel' // 特殊情况下直接写文件的MIME类型
})
let url = window.URL.createObjectURL(blob)
// 创建一个临时的url指向blob对象
// 创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载
let a = document.createElement('a')
a.href = url
a.download = filename
// 下载
a.click()
// 释放这个临时的对象url
window.URL.revokeObjectURL(url)

注意

1. filename 可以直接赋值一个字符串包含文件后缀名, 例如: ('导出表格.xlsx'), 但建议从响应头取
2. new Blob() 的第一个参数为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers , 不一定是 [res.data] , 也可能是 [res.body] 或其它, 具体根据后端的返回来写
3. new Blob() 的第二个参数用于指定将要放入 Blob 中的数据的类型 (MIME) , 大多数情况从响应头取, 但是后端返回 ( content-type: application/octet-stream 是默认的未知的类型, 除非你知道具体是什么类型,否则解析不出来 ) 的时候需要自己手动设置 MIME 类型。 例如: Excel 表需设置成 { type: 'application/vnd.ms-excel' }

多种文件类型的MIME类型参考点击此处

要在Vue项目中前端导出具有多级表头的表格Excel文件,你可以使用`xlsx`库结合一些操作来实现。下面是一个示例代码: 首先,确保已经安装了`xlsx`库。在项目的根目录下运行以下命令: ``` npm install xlsx ``` 然后,在需要导出Excel文件的组件中,可以按照以下方式编写代码: ```vue <template> <div> <button @click="exportExcel">导出Excel</button> </div> </template> <script> import XLSX from 'xlsx'; export default { methods: { exportExcel() { const headers = [ { text: '姓名', rowspan: 2 }, { text: '信息', colspan: 2 }, { text: '科目', rowspan: 2 }, { text: '成绩', colspan: 3 } ]; const data = [ ['张三', '学生', '数学', '语文', '英语'], [null, null, 90, 80, 85] ]; const mergeCells = [ { s: { r: 0, c: 1 }, e: { r: 0, c: 2 } }, { s: { r: 0, c: 3 }, e: { r: 0, c: 5 } } ]; const ws = XLSX.utils.aoa_to_sheet([headers, ...data]); ws['!merges'] = mergeCells; const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); XLSX.writeFile(wb, 'data.xlsx'); } } } </script> ``` 在上述代码中,我们定义了要导出表格的表头`headers`和数据`data`,以及合并单元格的信息`mergeCells`。在`exportExcel`方法中,我们首先将表头和数据合并为一个二维数组,然后使用`XLSX.utils.aoa_to_sheet`方法将其转换为工作表对象`ws`。接着,我们设置合并单元格的信息,并将其赋值给工作表对象的`!merges`属性。最后,创建工作簿对象`wb`,将工作表对象添加到工作簿中,并使用`XLSX.writeFile`方法将工作簿保存为Excel文件。 在用户点击"导出Excel"按钮时,将触发`exportExcel`方法,从而导出具有多级表头的表格Excel文件。 请注意,这种方式只能在现代浏览器中使用,并且导出Excel文件将保存在用户的本地文件系统中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值