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