纯前端生成xlsx格式表格文件

400 阅读1分钟

1,安装并引入这个插件

import ExportJsonExcel from "js-export-excel";

2,定义一点测试数据,正常是接口返回的数据

list: [
    {
      'username': '张三',
      'number': '111111111',
      'class': '一年级1班',
    },
    {
      'username': '李四',
      'number': '2222222',
      'class': '二年级2班',
    },
    {
      'username': '王二麻子',
      'number': '55555',
      'class': '三年级3班1',
    },
  ],

3,定义生成表格数据的函数

exportToExcel(list) {
  let dataTable=[];
  list.forEach((item)=>{
    dataTable.push({
      '名称':item.username,
      '号码':item.number,
      '班级':item.class,
    })
  })
  var option = {};
  option.fileName = "学生信息";
  option.datas = [
    {
      sheetData: dataTable,
      sheetName: "sheet",
      sheetFilter: ["名称", "号码", "班级"],//可有可无
      sheetHeader: ["名称", "号码", "班级"],
    },
  ];
  var toExcel = new ExportJsonExcel(option);
  toExcel.saveExcel();
},

over 完整代码

<template>
  <div>
    <button @click="exportData">exportData</button>
  </div>
</template>
<script>
import ExportJsonExcel from "js-export-excel";
export default {
  data() {
    return {
      list: [
        {
          'username': '张三',
          'number': '111111111',
          'class': '一年级1班',
        },
        {
          'username': '李四',
          'number': '2222222',
          'class': '二年级2班',
        },
        {
          'username': '王二麻子',
          'number': '55555',
          'class': '三年级3班1',
        },
      ],
    };
  },
  methods: {
    exportData(){
      this.exportToExcel(this.list)
    },
    exportToExcel(list) {
      let dataTable=[];
      list.forEach((item)=>{
        dataTable.push({
          '名称':item.username,
          '号码':item.number,
          '班级':item.class,
        })
      })
      var option = {};
      option.fileName = "学生信息";
      option.datas = [
        {
          sheetData: dataTable,
          sheetName: "sheet",
          sheetFilter: ["名称", "号码", "班级"],
          sheetHeader: ["名称", "号码", "班级"],
        },
      ];
      var toExcel = new ExportJsonExcel(option);
      toExcel.saveExcel();
    },
  },
};
</script>

掘金又出bug了,上传不了图片,没法看效果图了