vue.js实现导出Ecxcel功能(vue-json-excel)

介绍

在项目开发时免不了有时会用到表格数据导出Excel的功能，那么我们可以使用vue-json-excel来实现此功能，而且vue-json-excel使用起来非常简单。

官方地址：vue-json-excel - npm

主要参数：

Name	Type	Description	Default
data	Array	要导出的数据。
fields	Object	要导出的 JSON 对象内的字段。如果未提供，则 JSON 中的所有属性都将被导出。
export-fields (exportFields)	Object	用于解决使用变量字段的其他组件的问题，例如 vee-validate。exportFields 的工作方式与字段完全相同
type	string	Mime 类型 [xls, csv]	xls
name	string	要导出的文件名。	data.xls
header	string/Array	数据的标题。可以是字符串（一个标题）或字符串数​​组（多个标题）。
title(deprecated)	string/Array	与标头相同，保留标题是出于复古兼容性目的，但由于与 HTML5 标题属性冲突，不建议使用它。
footer	string/Array	数据的页脚。可以是字符串（一个页脚）或字符串数​​组（多个页脚）。
default-value (defaultValue)	string	当行没有字段值时用作后备。	''
worksheet	string	工作表选项卡的名称。	'Sheet1'
fetch	Function	下载前回调以获取数据，如果已设置，则在按下鼠标后和下载过程之前立即运行。 重要提示：仅在未定义数据道具时才有效。
before-generate	Function	在生成/获取数据之前回调调用方法，例如：显示加载进度
before-finish	Function	在下载框弹出之前回调调用方法，例如：隐藏加载进度
stringifyLongNum	Boolean	stringify long number and decimal(解决丢失数字精度的问题)，默认：false
escapeCsv	Boolean	这会转义 CSV 值，以解决数字字段的一些 excel 问题。但这将用="和"包装每个 csv 数据，以避免您必须将此道具设置为 false。默认值：真

安装、配置

npm install vue-json-excel

接下里在main.js中进行全局配置

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

开始使用

运行界面

核心代码

我这边是前后端分离的项目，直接调用接口API来获取列表数据，然后返回。

注意：我这里因为自己的界面样式需要才这样改的，你开发时根据自己的界面情况来定义样式。

.export-excel {
  display: inline !important;
}

     <download-excel
            class="export-excel"//样式自己定义
            :fields="json_fields"
            :fetch = "fetchData"
            title="用户统计"
            name="统计列表.xls">
       <el-button type="primary" size="mini" round>
            导出Excel
         </el-button>
      </download-excel>

  export default {
     data() {
       return {
          json_fields: {
          姓名: "memberName", // 这里的表头字段可以自由指定
          会员号: "memberNum",
          性别: "memberSex",
          年龄: "memberAge",
          注册日期: "date",
          电话: "phone",
          审核状态: "status",
          地址: "memberAddr"
      },
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ]
   }
}

 methods: {
      async fetchData(){
      const response = await this.axios.post('/api/member/list');
      console.log(response);
      return response.data;
    }
}

效果如下图：