In vue3, convert the json file from the back end into excel and download it locally

Foreword:

        Download the data in JSON format as an excel file in the browser. This component is based on the solution proposed in [this thread] (https://stackoverflow.com/questions/17142427/javascript-to-export-html-table-to-excel). Support Vue3.2.25 and above

Important! Extra Tips in Microsoft Excel

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

Effect:

If the following prompt appears, click Yes

 

 

Official address: click me

Steps for usage:

1. You can install npm/cnpm/pnpm/yarn, and install the following plug-ins

vue3-json-excel

2. Configuration in main.js

import vue3JsonExcel from 'vue3-json-excel';

const app = createApp(App);
app.component('Vue3JsonExcel', vue3JsonExcel);

3. The specific use of the page

template

<template>
  <vue3-json-excel
    :json-data="json_data"
    :fields="fields"
    name="测试111.xls"
  >
    <el-button>点我下载</el-button>
  </vue3-json-excel>

</template>

ts

<script lang="ts" setup>
const fields = ref({
    '姓名':'name',
    '年龄':'age',
    '编号':'num',
  });
const json_data = ref([
  {
    name:'张三',
    age:17,
    num:'~00013', //能解决丢0问题
  },{
    name:'李四',
    age:33,
    num:'00014',//会出现丢失0
  },
]);

</script>

4. There are still problems

     Like the vue2 plugin vue-json-excel, there is also a problem of 0 being lost

Add a symbol in front, ~0 can solve this problem

5. Official APIs

Name	Type	Description	Default	remark
json-data	Array	Data to be exported
fields	Object	Fields within the JSON object to export. If no properties are provided, all properties in JSON will be exported.
export-fields (exportFields)	Object	Used to fix issues with other components using variable fields like vee-validate. exportFields works exactly like fields
type	string	Mime type [xls, csv]	xls	Version 1.0.x 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. Can be a string (one title) or an array of strings (multiple titles).
title(deprecated)	string/Array	Like header, title is maintained for retroactive compatibility purposes, but its use is deprecated due to conflicts with the HTML5 title attribute.