A JSON to excel component that can be used by Vue3

JSON to Excel for VUE3

Download the JSON format data in the form of excel files in the browser. This component is based on the solution proposed by this thread Support Vue3.2.25 and above

Important! Extra tips in Microsoft Excel

The method implemented in this component uses HTML table drawing. In xls files, Microsoft Excel no longer recognizes HTML as native content, so a warning message is displayed before the file is opened. The content of excel has been perfectly presented, but the prompt information cannot be avoided, please don't care!

Getting started

Installation dependencies:

npm install vue3-json-excel

There are two ways to register components at the entrance of the vue3 application:

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

Vue.component("vue3JsonExcel", vue3JsonExcel)

or

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

Vue.use(vue3JsonExcel)

Can be used directly in the template file

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

Props List

Name	Type	Description	Default	remark
json-data	Array	Data to be exported
fields	Object	The fields in the JSON object to be exported. If no attributes are provided, all attributes in the JSON will be exported.
export-fields (exportFields)	Object	Used to fix problems with other components that use variable fields, such as vee-validate. The working principle of exportFields is exactly the same as that of fields
type	string	Mime type [xls, csv]	xls	The 1.0.x version only supports xls for the time being, and csv will be iterated in the next version
name	string	File Exported file name	jsonData.xls
header	string/Array	The title of the data. It can be a string (one title) or an array of strings (multiple titles).
title(deprecated)	string/Array	Same as header, title is maintained for retrospective compatibility purposes, but due to conflicts with HTML5 title attributes, it is not recommended to use it.

Example

// 待补充

License

MIT

Status

The project is in the early development stage. Welcome to participate in the joint construction.
If you have good product suggestions, please contact me! ! ! !

npm address

vue3-json-excel