vue JSON数据导出.csv文件
时间: 2023-12-08 20:06:39 浏览: 38
可以使用以下步骤来将 JSON 数据导出为 CSV 文件:
1. 安装 `json2csv` 模块:
```bash
npm install json2csv --save
```
2. 在需要导出 CSV 文件的组件中引入 `json2csv` 模块:
```javascript
import { json2csv } from 'json2csv';
```
3. 将 JSON 数据转换为 CSV 格式:
```javascript
const fields = ['name', 'age', 'email']; // CSV 表头
const data = [
{ name: '张三', age: 28, email: 'zhangsan@example.com' },
{ name: '李四', age: 32, email: 'lisi@example.com' },
{ name: '王五', age: 24, email: 'wangwu@example.com' }
]; // JSON 数据
const csv = json2csv({ fields, data });
```
4. 创建一个下载链接来下载 CSV 文件:
```javascript
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', 'data.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
```
完整代码如下:
```javascript
<template>
<div>
<button @click="exportCsv">导出 CSV</button>
</div>
</template>
<script>
import { json2csv } from 'json2csv';
export default {
methods: {
exportCsv() {
const fields = ['name', 'age', 'email']; // CSV 表头
const data = [
{ name: '张三', age: 28, email: 'zhangsan@example.com' },
{ name: '李四', age: 32, email: 'lisi@example.com' },
{ name: '王五', age: 24, email: 'wangwu@example.com' }
]; // JSON 数据
const csv = json2csv({ fields, data });
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', 'data.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};
</script>
```