2022-10-excel的导入和导出

1. 场景需求

经常有excel的导入和导出的需求。这个其实有两种方案：前端实现和后端实现。其实就是谁去解析excel整理数据，和谁去组织数据给excel。这里用纯前端的方式实现，用到的第三方库主要是

2. excel的导入

思路就是上传拿到文件流，用excel读取内容，转成json，发给后端。这里只记录流文件转excel的代码。

2.1 基本用法

tsx

const handleExcel = (rawFile: any) => {
  const fileReader = new FileReader();
  fileReader.onload = (e) => {
    const data = e.target.result;
    const workBook = XLSX.read(data, { type: "array" });
    const firsSheetName = workBook.SheetNames[0];
    const firstTable = workBook.Sheets[firsSheetName];
    const result = XLSX.utils.sheet_to_json(firstTable);
    console.log('raw', result);
  };
  fileReader.readAsArrayBuffer(rawFile);
};

打印的结果是

tsx

[
  {
    "ID": 1,
    "姓名": "刘备",
    "日期": 44830
  },
  {
    "ID": 2,
    "姓名": "关羽",
    "日期": 44831
  },
  {
    "ID": 3,
    "姓名": "张飞",
    "日期": 44832
  }
]

2.2 处理时间

tsx

// 把excel文件中的日期格式的内容转回成标准时间
function formatExcelDate(numb, format = "/") {
  const time = new Date(
    (numb - 25567) * 24 * 3600000 -
      5 * 60 * 1000 -
      43 * 1000 -
      24 * 3600000 -
      8 * 3600000
  );
  time.setYear(time.getFullYear());
  const year = time.getFullYear() + "";
  const month = time.getMonth() + 1 + "";
  const date = time.getDate() + "";
  if (format && format.length === 1) {
    return year + format + month + format + date;
  }
  return (
    year + (month < 10 ? "0" + month : month) + (date < 10 ? "0" + date : date)
  );
}

excel的日期处理算法是一样的，所以网上找一个算法，修改下日期字段就可以。

tsx

const result = XLSX.utils.sheet_to_json(firstTable).map((item: any) => {
  return {
    ...item,
    日期: formatExcelDate(item["日期"]),
  };
});
console.log("raw", result);

2.3 表头处理

tsx

import * as XLSX from "xlsx";
/**
 * 获取表头（通用方式）
 */
export const getHeaderRow = sheet => {
  const headers = []
  const range = XLSX.utils.decode_range(sheet['!ref'])
  let C
  const R = range.s.r
  /* start in the first row */
  for (C = range.s.c; C <= range.e.c; ++C) {
    /* walk every column in the range */
    const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
    /* find the cell in the first row */
    let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
    if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
    headers.push(hdr)
  }
  return headers
}

表头也是通用处理

tsx

const header = getHeaderRow(firstTable);
console.log("raw", header);

打印结果

tsx

[
  "ID",
  "姓名",
  "日期"
]

3. excel的导出

导出的思路是，点击导出，弹框输入文件名，然后调接口获取所有的数据，json转成excel文件，用blob包一下，完成下载。

tsx

const data = [
  {
    id: 1,
    name: "刘备",
    date: 44830,
    role: [
      { id: 1, title: "经理" },
      { id: 2, title: "干事" },
    ],
  },
  {
    id: 2,
    name: "关羽",
    date: 44831,
  },
  {
    id: 3,
    name: "张飞",
    date: 44832,
  },
];
const USER_RELATIONS = {
  ID: "id",
  姓名: "name",
  职务: "role",
  开通时间: "date",
};

const formatJSON = (rows) => {
  return rows.map((row) => {
    return Object.keys(USER_RELATIONS).map((key) => {
      if (USER_RELATIONS[key] === "role") {
        const roles = row[USER_RELATIONS[key]] ?? [];
        return JSON.stringify(roles.map((role) => role.title));
      }
      return row[USER_RELATIONS[key]];
    });
  });
};

const handleDownload = () => {
  const arr = formatJSON(data);
  console.log(arr);
  exportJsonToExcel({
    header: Object.keys(USER_RELATIONS),
    data: arr,
    fileName: "需要的数据",
    autoWidth: true,
    bookType: "xlsx",
  });
};

打印的arr

tsx

[
  [
    1,
    "刘备",
    "[\"经理\",\"干事\"]",
    44830
  ],
  [
    2,
    "关羽",
    "[]",
    44831
  ],
  [
    3,
    "张飞",
    "[]",
    44832
  ]
]

可以看到，其实是把json转成了数组，以行为维度。至于那个exportJsonToExcel，也都是通用代码

tsx

/* eslint-disable */
import { saveAs } from 'file-saver'
import * as XLSX from 'xlsx'

function datenum(v, date1904) {
  if (date1904) v += 1462
  var epoch = Date.parse(v)
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}

function sheet_from_array_of_arrays(data, opts) {
  var ws = {}
  var range = {
    s: {
      c: 10000000,
      r: 10000000
    },
    e: {
      c: 0,
      r: 0
    }
  }
  for (var R = 0; R != data.length; ++R) {
    for (var C = 0; C != data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R
      if (range.s.c > C) range.s.c = C
      if (range.e.r < R) range.e.r = R
      if (range.e.c < C) range.e.c = C
      var cell = {
        v: data[R][C]
      }
      if (cell.v == null) continue
      var cell_ref = XLSX.utils.encode_cell({
        c: C,
        r: R
      })

      if (typeof cell.v === 'number') cell.t = 'n'
      else if (typeof cell.v === 'boolean') cell.t = 'b'
      else if (cell.v instanceof Date) {
        cell.t = 'n'
        cell.z = XLSX.SSF._table[14]
        cell.v = datenum(cell.v)
      } else cell.t = 's'

      ws[cell_ref] = cell
    }
  }
  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
  return ws
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook()
  this.SheetNames = []
  this.Sheets = {}
}

function s2ab(s) {
  var buf = new ArrayBuffer(s.length)
  var view = new Uint8Array(buf)
  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
  return buf
}

export const exportJsonToExcel = ({
  multiHeader = [],
  header,
  data,
  filename,
  merges = [],
  autoWidth = true,
  bookType = 'xlsx'
} = {}) => {
  // 1. 设置文件名称
  filename = filename || 'excel-list'
  // 2. 把数据解析为数组，并把表头添加到数组的头部
  data = [...data]
  data.unshift(header)
  // 3. 解析多表头，把多表头的数据添加到数组头部（二维数组）
  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i])
  }
  // 4. 设置 Excel 表工作簿（第一张表格）名称
  var ws_name = 'SheetJS'
  // 5. 生成工作簿对象
  var wb = new Workbook()
  // 6. 将 data 数组（json格式）转化为 Excel 数据格式
  var ws = sheet_from_array_of_arrays(data)
  // 7. 合并单元格相关（['A1:A2', 'B1:D1', 'E1:E2']）
  if (merges.length > 0) {
    if (!ws['!merges']) ws['!merges'] = []
    merges.forEach((item) => {
      ws['!merges'].push(XLSX.utils.decode_range(item))
    })
  }
  // 8. 单元格宽度相关
  if (autoWidth) {
    /*设置 worksheet 每列的最大宽度*/
    const colWidth = data.map((row) =>
      row.map((val) => {
        /*先判断是否为null/undefined*/
        if (val == null) {
          return {
            wch: 10
          }
        } else if (val.toString().charCodeAt(0) > 255) {
          /*再判断是否为中文*/
          return {
            wch: val.toString().length * 2
          }
        } else {
          return {
            wch: val.toString().length
          }
        }
      })
    )
    /*以第一行为初始值*/
    let result = colWidth[0]
    for (let i = 1; i < colWidth.length; i++) {
      for (let j = 0; j < colWidth[i].length; j++) {
        if (result[j]['wch'] < colWidth[i][j]['wch']) {
          result[j]['wch'] = colWidth[i][j]['wch']
        }
      }
    }
    ws['!cols'] = result
  }

  // 9. 添加工作表（解析后的 excel 数据）到工作簿
  wb.SheetNames.push(ws_name)
  wb.Sheets[ws_name] = ws
  // 10. 写入数据
  var wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: 'binary'
  })
  // 11. 下载数据
  saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream'
    }),
    `${filename}.${bookType}`
  )
}

2022-10-excel的导入和导出 #

1. 场景需求 #

2. excel的导入 #

2.1 基本用法 #

2.2 处理时间 #

2.3 表头处理 #

3. excel的导出 #