表格导出传递表单参数给后端,后端返回文件流,前端vue怎么处理,代码示例
时间: 2023-08-17 19:05:24 浏览: 205
假设你使用axios库来发送请求,后端接口为/export,后端返回的文件流为Excel文件,可以按照以下步骤来实现:
1. 在Vue组件中定义一个方法,用于触发导出操作,并接收表单参数:
```
exportTable() {
const params = {
// 表单参数
}
// 发送请求
axios({
url: '/export',
method: 'POST',
responseType: 'blob',
data: params
}).then(res => {
// 处理返回的文件流
const content = res.data
const blob = new Blob([content])
const fileName = 'export.xlsx'
// 下载文件
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
link.click()
}).catch(error => {
// 处理错误
})
}
```
2. 在后端接口中,接收表单参数,生成Excel文件并返回文件流:
```python
import io
from flask import make_response
import xlsxwriter
@app.route('/export', methods=['POST'])
def export():
# 接收表单参数
form_data = request.form
# 生成Excel文件
output = io.BytesIO()
workbook = xlsxwriter.Workbook(output)
worksheet = workbook.add_worksheet()
# 写入数据
workbook.close()
output.seek(0)
# 返回文件流
response = make_response(output.read())
response.headers.set('Content-Type', 'application/vnd.ms-excel')
response.headers.set('Content-Disposition', 'attachment', filename='export.xlsx')
return response
```
这样,当用户点击导出按钮时,前端会发送一个POST请求到后端的/export接口,后端会接收表单参数,生成Excel文件并返回文件流,前端会处理文件流并下载Excel文件。
阅读全文