8.前端导出Excel — vue-json-excel

vue-json-excel 是一个用于Vue.js应用程序的插件，可以将JSON数据导出为Excel文件。以下是如何使用 vue-json-excel 导出Excel文件的简单示例：

1. 首先，安装 vue-json-excel 插件：

npm install vue-json-excel --save

2. 在你的Vue组件中引入并使用 vue-json-excel：

<template>
  <div>
    <download-excel
      :data="json_data"
      :fields="json_fields"
      name="filename.xls"
    >
      Download Excel
    </download-excel>
  </div>
</template>
 
<script>
import JsonExcel from 'vue-json-excel'
 
export default {
  components: {
    'download-excel': JsonExcel
  },
  data() {
    return {
      json_fields: {
        Name: 'name',
        Email: 'email',
        DoB: 'dob'
      },
      json_data: [
        {
          name: 'John Doe',
          email: 'john@example.com',
          dob: '1990-01-01'
        },
        {
          name: 'Jane Doe',
          email: 'jane@example.com',
          dob: '1995-12-31'
        }
      ],
      // More data properties...
    }
  }
}
</script>

在这个例子中，json_fields 定义了Excel文件中列的标题，json_data 是要导出的数据。download-excel 组件的其他属性可以根据需要进行设置，比如指定文件名等。用户点击该组件时，将触发数据的导出。