js中的导出怎么写
1首先写一个导出按钮

import {  Button } from 'antd'
import ExcelJS  from 'exceljs';
import moment from 'moment';
<Button onClick={this.exportExcal()} >导出</Button>

2.点击导出按钮走onClick事件

exportExcal = () => {
//targetData  为需要导出的数据,类型为数组
    let targetData = [
      { name: '张三',  age: 25,id_number: '1234567890',  phone: '12345678'},
      { name: '李四', age: 25, id_number: '123456789078945', phone: '12345678456' }
    ]
    const data = []
    const time = moment(new Date()).format("YYYY年MM月DD日")   //获取当前时间
    const context = `${time}数据表 `
    //data中存入标题信息,分别为:整行的大标题、部分行合并的表格头部、需要上下合并或者正常显示的部分
    //null为需要合并的部分,根据表格信息酌情添加
    data.push([context, null, null, null, null])
    data.push(["姓名", "身份证号", "电话号", '年龄'])
    //创建一个工作薄
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Sheet');  //Sheet为活动工作表名
    function getABC() {
      let str = []
      for (let i = 66; i < 92; i++) {
        str.push(String.fromCharCode(i))
      }
      str.push(...['AA', 'AB', 'AC', 'AD'])
      return str
    }
    const abc = getABC()
    // const sheet = workbook.addWorksheet('Sheet 1', { views: [{ state: 'frozen', ySplit: 3 }]}) //生成sheet  ySplit: 固定显示第几行
    data.forEach((i, index) => { // 根据 null ,合并单元格
      worksheet.addRow(i)
      let isNull = false
      let mergeObj = {}
      if (index < 2) {
        i.forEach((j, k) => {
          if (j === null && !isNull && Object.keys(mergeObj).length === 0) {
            mergeObj.top = index + 1
            mergeObj.left = k
            isNull = true
          } else if ((j && isNull) || (j === null && k === i.length - 1)) {
            isNull = false
            mergeObj.bottom = index + 1
            mergeObj.right = k
            worksheet.mergeCells(mergeObj.top, mergeObj.left, mergeObj.bottom, mergeObj.right)
            mergeObj = {}
          }
        }
        )
      } else if (index === 2) {
        i.forEach((j, k) => {
          if (j === null) {
            worksheet.mergeCells(`${abc[k]}${index}:${abc[k]}${index + 1}`)
          }
        })
      }
    }
    )
    worksheet.columns = [
      { key: 'name', width: 20 },
      { key: 'id_number', width: 40 },
      { key: 'phone', width: 20 },
      { key: 'age', width: 20 },
    ];
    //将请求道的数据转换存进sheet中 
    targetData.forEach((i, index) => {
      const { name,  id_number, phone, age,} = i
      worksheet.addRow([ name,id_number, phone,age ])
    })
    worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
      //设置行高,顺便设置第二、第三行表头的字体等
      if (rowNumber === 1) {
        row.height = 30
        row.eachCell((cell) => {
          cell.font = {
            name: '宋体',
            size: 20,
          }
        })
      } else if (rowNumber === 2) {
        row.height = 20
        row.eachCell((cell, cellNumber) => {
          if ((cellNumber > 11 && cellNumber < 12) || (cellNumber > 12 && cellNumber < 16) || (cellNumber > 20 && cellNumber < 26)) {
            cell.font = {
              name: '宋体',
              size: rowNumber === 2 ? 16 : 14,
            }
          } else {
            cell.font = {
              name: '宋体',
              size: 16,
            }
          }
        })
      } else {
        //通用行高
        row.height = 20
      }
      //遍历所有包括空的单元格,设置样式等
      row.eachCell({ includeEmpty: true }, (cell) => {
        cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true }  //居中对齐,自动换行
        cell.border = {
          top: { style: 'thin' },
          left: { style: 'thin' },
          bottom: { style: 'thin' },
          right: { style: 'thin' }
        }
        if (rowNumber > 3) { // 对第三行以上的设置字题
          cell.font = {
            name: '宋体',
            size: 14
          }
        }
      })
    })
	// 导出文件
    const writeFile = (fileName, content) => {
      let a = document.createElement('a')
      let blob = new Blob([content], { type: 'text/plain' })
      a.download = fileName
      a.href = URL.createObjectURL(blob)
      a.click()
    }
    workbook.xlsx.writeBuffer().then((buffer) => {
      writeFile(`${context}.xlsx`, buffer)   //导出文件名
    })
}

在这里插入图片描述

3.*注意
要安装excal的依赖包
用的moment.js也需要安装依赖包
moment.js的官网 http://momentjs.cn/,感兴趣的自行学习。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐