7

一个Vue3可使用的JSON转excel组件

 2 years ago
source link: https://segmentfault.com/a/1190000041117522
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

JSON to Excel for VUE3

在浏览器中将JSON格式数据以excel文件的形式下载。该组件是基于this thread 提出的解决方案。支持Vue3.2.25及以上版本使用

重要提示! Microsoft Excel中的额外提示

此组件中实现的方法使用HTML表绘制。在xls文件中，Microsoft Excel不再将HTML识别为本机内容，因此在打开文件之前会显示警告消息。excel的内容已经完美呈现，但是提示信息无法避免，请不要在意！

Getting started

安装依赖：

npm install vue3-json-excel

在vue3的应用入口处有两种注册组件的方式：

import Vue from "vue"
import {vue3JsonExcel} from "vue3-json-excel"

Vue.component("vue3JsonExcel", vue3JsonExcel)
import Vue from "vue"
import vue3JsonExcel from "vue3-json-excel"

Vue.use(vue3JsonExcel)

在template文件中直接使用即可

<vue3-json-excel :json-data="json_data">
  Download Data
</vue3-json-excel>

Props List

NameTypeDescriptionDefaultremarkjson-dataArray即将导出的数据fieldsObject要导出的JSON对象内的字段。如果未提供任何属性，将导出JSON中的所有属性。export-fields (exportFields)Object用于修复使用变量字段的其他组件的问题，如vee-validate。exportFields的工作原理与fields完全相同typestringMime 类型 [xls, csv]xls1.0.x版本暂时只支持xls，csv会在下个版本迭代namestringFile 导出的文件名jsonData.xlsheaderstring/Array数据的标题。可以是字符串（一个标题）或字符串数组（多个标题）。title(deprecated)string/Array与header相同，title是出于追溯兼容性目的而维护的，但由于与HTML5 title属性冲突，不建议使用它。

Example

// 待补充

License

Status

该项目处于早期开发阶段。欢迎参与共建。
有好的产品建议可以联系我！！！！

npm地址

vue3-json-excel


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK