xlsxjs导出excel表格

功能

• 前端获取数据生成excel表格
• 需要在第一行添加合计数据
• 并且不是覆盖第一行数据

插件

docs.sheetjs.com/docs/api/ut…

使用

    import * as XLSX from 'xlsx'
    
    
    const formatJson = (filterVal: any, jsonData: any) => {
        return jsonData.map((v: any) => filterVal.map((j: any) => v[j]))
      }
    
    const tHeader = ['日期', '名称', 'age', 'id', '请求信息']
    const filterVal = ['date', 'name', 'id', 'information']
    const newObject = { date: '', name: '', id: '', information: '' }
    dataSource.unshift(newObject)
    const list = formatJson(filterVal, dataSource)
    list.unshift(tHeader)
    const ws = XLSX.utils.aoa_to_sheet(list)
    const wb = XLSX.utils.book_new()
    // 添加合计行
    const totalRow = ['合计'];
    for (let i = 1; i < tHeader.length; i++) {
      totalRow.push('111')
    }
    // 将合计行添加到工作表
    XLSX.utils.sheet_add_json(ws, [totalRow], { header: [], skipHeader: true, origin: "A2" });
    XLSX.utils.book_append_sheet(wb, ws, '数据报表')
    XLSX.writeFile(wb, title)

遇到问题

• id如果位数过长下载的excel表格，鼠标选中id时会自动进行科学记数法，导致数据转换成数字
• 解决办法

获取到id的数据进行转换'\t' + v[j].toString()

// 提取相对应字段的数据
  const formatJson = (filterVal: any, jsonData: any) => {
    return jsonData.map((v: any) => {
      return filterVal.map((j: any) => {
        if (j === 'id') {
          return '\t' + v[j].toString()
        } else {
          return v[j]
        }
      })
    })
  }