vue 查询数据之后导出文件
时间: 2023-08-12 19:40:23 浏览: 87
vue-以文件流-blob-的形式-下载-导出文件操作
首先,你需要使用 Vue.js 发送一个查询数据的请求到后端,并且接收到后端返回的数据。在前端接收到数据后,你可以使用以下方法将数据导出到文件:
1. 使用 CSV 格式导出数据:
你可以使用 `json2csv` 库将 JSON 数据转换为 CSV 格式,然后将其作为文件下载。以下是一个使用示例:
```javascript
import { json2csv } from 'json-2-csv';
...
// 假设你已经从后端接收到了数据,存储在 data 变量中
const csvData = json2csv.parse(data);
const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', 'data.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
```
2. 使用 Excel 格式导出数据:
你可以使用 `xlsx` 和 `file-saver` 库将数据导出为 Excel 文件,以下是一个使用示例:
```javascript
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
...
// 假设你已经从后端接收到了数据,存储在 data 变量中
const worksheet = XLSX.utils.json_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
saveAs(blob, 'data.xlsx');
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i !== s.length; ++i) {
view[i] = s.charCodeAt(i) & 0xff;
}
return buf;
}
```
这些方法可以让你将数据导出为文件,你可以根据自己的需求选择其中的一个。
阅读全文