JSON to Excel for VUE 2
直接从浏览器下载 JSON 作为 excel 或 CSV 文件 es5 兼容版本. 原地址 https://github.com/jecovier/vue-json-excel
重要!Microsoft Excel 中的额外提示
此组件中实现的方法使用 HTML 表绘制.xls 文件,Microsoft Excel 不再将 HTML 识别为本机内容,因此在打开文件之前将显示警告消息。内容将被完美呈现,但警告消息无法避免
入门
下载包:
npm install vue-json-excelie
在 vue 应用程序入口点注册 JsonExcel:
Vue
模板
下载数据
Props List
名称 | 类型 | 说明 | 默认值 |
---|---|---|---|
data | Array | 要导出的数据。 | |
fields | Object | JSON 对象中要导出的字段。如果没有提供,则将导出 JSON 中的所有属性。 | |
export-fields (exportFields) | Object | 用于修复使用变量字段的其他组件(如 vee validate)的问题。exportFields 的工作原理与 fields 完全相同 | |
type | string | Mime 类型 [xls, csv] | xls |
name | string | 要导出的文件名。 | data.xls |
header | string/Array | 数据的标题。可以是字符串(一个标题)或字符串数组(多个标题)。 | |
title(deprecated) | string/Array | 与 header 相同,title 是为了追溯兼容性而维护的,但是由于与 HTML5 title 属性冲突,不建议使用它。 | |
footer | string/Array | 数据的页脚。可以是字符串(一个页脚)或字符串数组(多个页脚)。 | |
default-value (defaultValue) | string | 当行没有值时作为默认。 | '' |
worksheet | string | 工作表选项卡的名称。 | 'Sheet1' |
fetch | Function | 回调以在下载前获取数据,如果设置了它,它将在按下鼠标后和下载过程之前立即运行。 重要提示:只有在未定义数据属性的情况下才有效。 |
|
before-generate | Function | 回调以在生成/获取数据之前调用方法,例如:show loading progress | |
before-finish | Function | 下载前弹出一个回调函数,比如在下载前弹出一个回调函数 | |
stringifyLongNum | Boolean | stringify long number and decimal(解决数字精度损失问题), 默认: false | |
escapeCsv | Boolean | 这将转义 CSV 值,以便修复一些有关数字字段的 excel 问题。但这将用**="和"**包装每个 csv 数据,以避免您必须将此属性设置为 false。 默认: True |
Example
Vue const app = el: '#app' data: json_fields: 'Complete name': 'name' City: 'city' Telephone: 'phone.mobile' 'Telephone 2': field: 'phone.landline' { return `Landline Phone - ` } 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
下载 Excel (你可以用html代码来定制它!)
必填
- json_data: 包含要导出的数据。
- json_fields: 您可以选择要导出的字段。指定嵌套数据并为字段指定标签。键是标签,值是 JSON 字段。这将按原样导出字段数据。如果需要自定义导出的数据,可以定义回调函数。
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 { return `formatted value ` }
json_fields 是一个表示要导出哪些列的对象。如果没有提供对象,组件将使用数据数组中的第一个对象提取键作为列名。Json 字段示例:
:export-fields="{
'Human friendly name': '_name_field_from_json',
'user's last name': '_last_name_text'
}"
Export CSV
要将 JSON 导出为 CSV 文件,只需添加属性"type",值为"CSV":
下载 CSV (你可以用html代码来定制它)
多行值将出现在单个单元格中
数据中包含换行符的单个文本值将在 Excel 中显示为单个单元格。这避免了多行值被拆分为多个单元格的不良行为,这些单元格必须在使用数据筛选器和透视表之前进行合并。
For example:
按需获取数据
如果您需要从服务器获取数据,您可以使用 fetch,它允许您定义一个回调函数,当用户单击 download 按钮时将执行该回调函数。此函数必须返回包含要导出的数据的 JSON 值。基本用例是:
<template> <div id="app"> <hr> <h2>Fetch Example</h2> <downloadexcel class = "btn" :fetch = "fetchData" :fields = "json_fields" :before-generate = "startDownload" :before-finish = "finishDownload"> Download Excel </downloadexcel> </div></template> <script>;; name: "App" components: downloadexcel { return json_fields: 'Complete name': 'name' 'Date': 'date' } //data methods: async { const response = await axios; console; return responsedataholidays; } { ; } { ; } ;</script>
Using callbacks
在字段描述中使用回调函数时,有三个选项可用于检索数据:
- field: 'path.to.nested.property' 可以使用嵌套属性表示法检索特定值。
json_fields: 'Complete name': 'name' 'City': 'city' 'Telephone': 'phone.mobile' 'Telephone 2' : field: 'phone.landline' { return `Landline Phone - `; }
- field: 'define.nested.object' 也可以检索嵌套对象。
json_fields: s 'Complete name': 'name' 'City': 'city' 'Telephone': 'phone.mobile' 'Telephone 2' : field: 'phone' { return `Landline Phone - `; }
- Or get the whole row 如果字段未定义。
json_fields: 'Complete name': 'name' 'City': 'city' 'Telephone': 'phone.mobile' 'Telephone 2' : { return `Landline Phone - `; }
License
MIT
Status
此版本为兼容 ie 的 es5 版本,详细内容请看原地址 https://github.com/jecovier/vue-json-excel