Vue:使用vue-json-excel导出数据到excel
要在Vue应用中使用vue-json-excel
导出数据到Excel,首先需要安装这个插件:
npm install vue-json-excel
然后在Vue组件中引入并使用这个插件:
<template>
<div>
<excel-json-excel :data="data" :fields="fields" name="example.xlsx">
Download Excel
</excel-json-excel>
</div>
</template>
<script>
import JsonExcel from 'vue-json-excel';
export default {
components: {
'excel-json-excel': JsonExcel,
},
data() {
return {
// 这里是要导出的数据数组
data: [
{ name: 'John Doe', salary: 3000 },
{ name: 'Jane Doe', salary: 2500 },
// 更多数据...
],
// 这里定义了要导出的字段和标题
fields: {
Name: 'name',
'Monthly Salary': 'salary',
},
};
},
};
</script>
在上面的例子中,data
是一个包含对象的数组,每个对象代表一行数据。fields
定义了每个字段在Excel中的名称和对应的数据键。用户点击<excel-json-excel>
组件时,会下载名为example.xlsx
的Excel文件,包含data
数组中的数据。
评论已关闭