526互联

【SheetJS】导出excel

发布时间 2023-06-30 15:12:16作者: ^Mao^

背景

在工作中我们需要对后端返回的数据，然后导出excel进行展示。

注意：SheetJS只支持普通的导出，如果想要支持丰富的功能（比如：修改导出excel表格的样式或者数据验证等等）就需要使用付费版。excel表格的样式等更高级的功能我们可以使用其他第三方库（exceljs）实现

基本使用

<template>
  <div class="app">
    <button @click="exportExcel">点击导出excel</button>
  </div>
</template>
<script>
import * as XLSX from "xlsx";

export default {
  data() {
    return {
      tableData: [
        {
          employee_id: 100,
          first_name: "Steven",
          phone_number: "123456789",
          hire_date: "1987-06-17",
        },
        {
          employee_id: 101,
          first_name: "Neena	Kochhar",
          phone_number: "123456789",
          hire_date: "1989-09-21",
        },
        {
          employee_id: 102,
          first_name: "Alexander",
          phone_number: "5874517",
          hire_date: "1990-01-03",
        },
      ],
    };
  },
  methods: {
    //  3. 需求：解决步骤2要自己去转换成二维数组的问题；
    //          使用XLSX.utils.json_to_sheet的方法
    //          缺点：如果数组对象中包含不存在的表头对应键的话也会展示在excel中
    async exportExcel() {
      let tableData = [
        {
          id: 1,
          name: "张三",
          age: 18,
          address: "广州市",
          hire_date: "2023-06-03",
        },
        { id: 2, name: "李四", age: 16 },
        { id: "3", name: "王五", age: 20 },
      ];
      const excel_map = [
        { label: "ID", prop: "id" },
        { label: "Name", prop: "name" },
        { label: "Age", prop: "age" },
        { label: "雇佣日期", prop: "hire_date" },
      ];
      const excel_header = excel_map.map((item) => item.prop);
      var filename = "测试2.xlsx";
      var ws_name = "sheet(2)";

      // 根据表头转换数据
      const excel_data = tableData.map((item) => {
        let obj = {};
        for (let key of excel_header) {
          obj[key] = item[key];
        }
        return obj;
      });

      // 自定义表头
      const first_row = {};
      for (let map of excel_map) {
        first_row[map.prop] = map.label;
      }
      excel_data.unshift(first_row);

      var ws = XLSX.utils.json_to_sheet(excel_data, {
        header: excel_header,
        // 忽略插件设置的表头，常用在自定义表头。
        //      我们表头一般想要单词或者中文的，但是这种作为对象的键就不友好了
        skipHeader: true,
      });
      var wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, ws_name);
      XLSX.writeFileXLSX(wb, filename);
    },
    // 2. 需求：后端返回的是一个JSON数组，
    /* async exportExcel() {
      const tableData = [
        { id: 1, name: "张三", age: 18 },
        { id: 2, name: "李四", age: 16 },
        { id: "3", name: "王天霸", age: 20 },
      ];

      // 表头顺序以及表头与字段映射
      const excel_map = [
        { label: "ID", prop: "id" },
        { label: "Name", prop: "name" },
        { label: "Age", prop: "age" },
      ];

      let newData = tableData.map((item) => {
        let row = [];
        for (let o of excel_map) {
          row.push(item[o["prop"]]);
        }
        return row;
      });

      // 添加表头
      const excel_label = excel_map.map((item) => item.label);
      newData.unshift(excel_label);

      var filename = "测试2.xlsx";
      var ws_name = "sheet(2)";
      var ws = XLSX.utils.aoa_to_sheet(newData);
      var wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, ws_name);
      XLSX.writeFile(wb, filename);
    }, */
    // 1. 普通方式
    /* async exportExcel() {
      // 文件名称
      var filename = "测试1.xlsx";
      //数据，一定注意需要时二维数组
      var data = [
        [1, 2, 3],
        [true, false, null, "sheetjs"],
        ["foo", "bar", new Date("2014-02-19T14:30Z"), "0.3"],
        ["baz", null, "qux"],
      ];
      //Excel第一个sheet的名称
      var ws_name = "sheet(1)";
      // 创建sheet
      var ws = XLSX.utils.aoa_to_sheet(data);
      // 创建wokbook
      var wb = XLSX.utils.book_new();
      // 将数据添加到工作薄
      XLSX.utils.book_append_sheet(wb, ws, ws_name);
      // 导出文件
      XLSX.writeFile(wb, filename);
    }, */
  },
};
</script>
<style scoped></style>