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>