码云前端开发 2021-12-15

Vue3 JSON转excel组件

文章目录隐藏

JSON to Excel for VUE3

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

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

安装依赖：

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>

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