前端如何将后端的数组(不是数据流)导出成excel格式

使用此文档,框架是vue框架.
第一步.安装vue-json-excel

npm install vue-json-excel -S

第二步.在main.js文件中引入并且注册

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

第三步.在使用的页面

<download-excel
        class = "export-excel"
        :data = "json_data"  //需要导出的数据
        :name = "filename">      //文件导出的名字,默认类型为xls
        <button class="button-export">导出</button>
      </download-excel>

在上面还可以增加一些属性,由于我没有用到,所以上面没写.第二,button那个按钮可以根据需要来写,不需要点击事件

1. data 需要导出的数据,支持中文,Array
2. fields 选择需要导出的字段,如果不写,就是导出所有的字段,Object
3. name 导出的文件名
4. type 导出的文件类型,默认是xls,还有csv格式

注意以下几点

json_fields里面的属性是excel表每一列的title,注意多个词组组成的属性名要加双引号
如果需要自定义导出的数据，可以定义回调函数。

data() {
    return {
      json_fields: {
        "Complete name": "name",    //常规字段
        Telephone: "phone.mobile", //支持嵌套属性
        "Telephone 2": {
          field: "phone.landline",
                    //自定义回调函数
          callback: value => {
            return `Landline Phone - ${value}`;
          }
        }
      },
      json_data: [
        {
          name: "Tony Peña",
          city: "New York",
          country: "United States",
          birthdate: "1978-03-15",
          phone: {
            mobile: "1-541-754-3010",
            landline: "(541) 754-3010"
          }
        },
        {
          name: "Thessaloniki",
          city: "Athens",
          country: "Greece",
          birthdate: "1987-11-23",
          phone: {
            mobile: "+1 855 275 5071",
            landline: "(2741) 2621-244"
          }
        }
      ],
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ]
    };
  }