Javascript将HTML表格导出到Excel

vue-json-excel (vue-json-excel)

Javascript to export html table to Excel

Javascript将HTML表格导出到Excel

The method implemented in this component use HTML tables to draw the .xls files, Microsoft Excel no longer recognize HTML as native content so will prompt a warning message before open the file. The content will be rendered perfectly but the message can't be avoid.

在此组件中实现的方法使用HTML表绘制.xls文件，Microsoft Excel不再将HTML识别为本地内容，因此在打开文件之前将提示警告消息。 内容将完美呈现，但不可避免。

入门 (Getting started)

Get the package:

获取包装：

npm install vue-json-excel

Register JsonExcel in your app entrypoint:

在您的应用入口点注册JsonExcel：

import Vue from 'vue'
import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

In your template

在您的模板中

<download-excel
    :data   = "json_data">
    Download Data
    <img src="download_icon.png">
</download-excel>

道具清单 (Props List)

Name	Type	Description
data	Array	(required) Data to be exported
fields	Object	fields inside the Json Object that you want to export. If no given, all the properties in the Json are exported
export-fields (exportFields)	Object	this prop is used to fix the problem with other components that use the variable fields, like vee-validate. exportFields works exactly like fields
type	string	mime type [xls, csv], default: xls
name	string	filename to export, deault: data.xls
title	string/Array	Title(s) for the data, could be a string or an array of strings (multiple titles)
footer	string/Array	Footer(s) for the data, could be a string or an array of strings (multiple footers)

名称	类型	描述
数据	数组	( 必填 )要导出的数据
领域	目的	您要导出的Json Object内的字段。 如果未给出，则将导出Json中的所有属性
出口字段(exportFields)	目的	该道具用于解决使用可变字段的其他组件的问题，例如vee-validate。 exportFields的工作原理与字段完全相同
类型	串	MIME类型[xls，csv]，默认值：xls
名称	串	要导出的文件名，默认值：data.xls
标题	字符串/数组	数据标题可以是一个字符串或字符串数​​组(多个标题)
页脚	字符串/数组	数据的页脚可以是字符串或字符串数​​组(多个页脚)

例 (Example)

import Vue from 'vue'
import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

const app = new Vue({
    el: '#app',
    data: {
        json_fields: {
            'Complete name': 'name',
            'City': 'city',
            'Telephone': 'phone.mobile',
            'Telephone 2' : {
                field: 'phone.landline',
                callback: (value) => {
                    return `Landline Phone - ${value}`;
                }
            },
        },
        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'
                }
            }
        ],
        json_meta: [
            [
                {
                    'key': 'charset',
                    'value': 'utf-8'
                }
            ]
        ],
    }
})

In your HTML call it like

在您HTML中称它为

<download-excel
	class   = "btn btn-default"
	:data   = "json_data"
	:fields = "json_fields"
	name    = "filename.xls">

	Download Excel (you can customize this with html code!)

</download-excel>

REQUIRED

需要

• json_data: Contains the data you want to export,

  json_data：包含您要导出的数据，

• json_fields: You can select what fields to export, especify nested data and assign labels to the fields

  json_fields：您可以选择要导出的字段，指定嵌套数据并为这些字段分配标签

  
  the key is the label, the value is the JSON field. This will export the field data 'as is'.
  关键是标签，值是JSON字段。 这将按原样导出字段数据。
  
  If you need to customize the the exported data you can define a callback function. Thanks to @gucastiliao.
  如果需要自定义导出的数据，则可以定义一个回调函数。 感谢@gucastiliao。

let json_fields = {
    // regular field (exported data 'as is')
    fieldLabel: attributeName, // nested attribute supported
    // callback function for data formatting
    anotherFieldLabel: {
        field: anotherAttributeName, // nested attribute supported
        callback: (value) => {
            return `formatted value ${value}`
        }
    },
}

导出CSV (Export CSV)

To export JSON to CSV file just add the prop type with value "csv":

要将JSON导出到CSV文件，只需添加prop类型，其值为“ csv”：

<download-excel
	class   = "btn btn-default"
	:data   = "json_data"
	:fields = "json_fields"
	type    = "csv"
	name    = "filename.xls">

	Download Excel (you can customize this with html code!)

</download-excel>

翻译自: https://vuejsexamples.com/json-to-excel-for-vue-2/