将JSON导出到CSV文件– vue-json-csv

将JSON导出到CSV文件– vue-json-csv
插件名称 vue-json-csv
发布时间 2020年5月30日
插件作者 Belphemur

这个VueJS组件,用于将JSON数据导出到CSV文件并下载生成的文件。

变更日志:

v1.2.12(12/15/2020)

  • Bug修复

安装和下载:

# 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>

Props 列表

名称 类型 描述
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>