插件名称 | vue-json-csv |
---|---|
发布时间 | 2020年5月30日 |
插件作者 | Belphemur |
这个VueJS组件,用于将JSON数据导出到CSV文件并下载生成的文件。
v1.2.12(12/15/2020)
# Yarn
$ yarn add vue-json-csv
# NPM
$ npm install vue-json-csv --save
在您的应用入口点注册JsonCSV:
import Vue from 'vue'
import JsonCSV from 'vue-json-csv'
Vue.component('downloadCsv', JsonCSV)
在您的模板中
<download-csv
:data = "json_data">
下载数据
<img src="download_icon.png">
</download-csv>
名称 | 类型 | 描述 |
---|---|---|
data | Array | (必填)要导出的数据 |
fields | Array/Function(value, key) | 您要导出的Json Object内的字段。如果未给出,则将导出Json中的所有属性。使用该函数过滤数据,并仅保留所需的属性。 |
labels | Object/Function(value, key) | 设置标题行的标签。 |
name | string | 要导出的文件名,默认:data.csv |
delimiter | string | 默认为“,”。可以更改为任何内容。 |
separator-excel | boolean | 如果为true,将SEP={delimiter} 在文件前添加使其易于在Excel中使用 |
encoding | string | 设置所需的编码,默认为’utf-8′ |
advancedOptions | Object | 您可以自己设置PapaParse的所有选项 |
import Vue from 'vue'
import JsonCSV from 'vue-json-csv'
Vue.component('downloadCsv', JsonCSV)
const app = new Vue({
el: '#app',
data: {
json_data: [
{
'name': 'Tony Peña',
'city': 'New York',
'country': 'United States',
'birthdate': '1978-03-15',
'phone': {
'mobile': '1-541-754-3010',
'landline': '(541) 754-3010'
}
},
{
'name': 'Thessaloniki',
'city': 'Athens',
'country': 'Greece',
'birthdate': '1987-11-23',
'phone': {
'mobile': '+1 855 275 5071',
'landline': '(2741) 2621-244'
}
}
]
}
})
在您的模板中称它为
<download-csv
class = "btn btn-default"
:data = "json_data"
name = "filename.csv">
Download CSV (This is a slot)
</download-csv>