下面我将为你详细讲解“vue下载excel的实现代码后台用post方法”的完整攻略。
首先,后台需要在接口中返回文件流的形式,以便前端能够接收到需要下载的excel文件。具体代码如下:
// 后台 Node.js代码示例
const XLSX = require('xlsx');
const fs = require('fs');
const path = require('path');
const workbook = XLSX.readFile('./test.xlsx');
const bufferData = XLSX.write(workbook,{type: 'buffer', bookType: 'xlsx'});
let fileName = 'testExcel.xlsx';
// 设置响应头信息
res.setHeader('Content-Type','application/octet-stream');
res.setHeader("Content-Disposition", "attachment;filename=" + encodeURI(fileName));
res.setHeader('Content-Length', bufferData.length);
// 直接返回文件流
res.end(bufferData);
上述代码中,我们使用了XLSX
库创建了一个名为test.xlsx
的excel文件,并将其转换为buffer类型。之后,为了响应下载请求,我们需要设置响应头信息,具体内容如下:
Content-Type
:设置返回类型为application/octet-stream
,表示二进制流Content-Disposition
:设置下载文件的文件名(url编码)Content-Length
:设置返回文件的长度最后,我们直接使用res.end()
方法将文件流返回给前端即可。
在前端代码实现中,我们需要使用axios
库发起POST请求,并在请求成功后获取到返回的文件流,以便能够相应下载。具体代码如下:
// 前端 Vue.js代码示例
import axios from 'axios';
import XLSX from 'xlsx';
// 前端请求POST下载Excel文件的方法
export const downloadExcel = params => {
return axios({
method: 'POST',
url: '/downloadExcel',
responseType: 'arraybuffer',
headers: {
'Content-Type': 'application/json;charset=utf-8',
'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
},
data: params // 发送请求参数
})
.then(response => {
// 导出 Excel 文件
var blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
var fileName = 'testExcel.xlsx'
var link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
link.click()
})
}
上述代码中,我们使用axios
库发起POST请求,并设置了响应类型为arraybuffer
,这样可以正确地获取到后台返回的Excel文件。同时,我们设置了请求头中的Content-Type
和Accept
,分别表示请求参数的类型和响应参数的类型。在请求成功后,我们使用Blob
类型创建了一个二进制对象,并使用创建的URL地址触发下载。
以上即为“vue下载excel的实现代码后台用post方法”的完整攻略。
本文链接:http://task.lmcjl.com/news/10234.html