pocketE

excel 导出插件

usage

yarn add pocket-excel file-saver better-xlsx

import { Excel } from 'pocket-excel'
import { saveAs } from 'file-saver'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 180,
    _cell: (text: string, row: any, index: number) => {
        if (index % 4 === 0) {
          return {
            rowSpan: 4
          }
        }
        return {
          rowSpan: 0
        }
      }
    },
  {
    title: '周期',
    dataIndex: 'period',
    key: 'period',
    width: 150,
    _renderValue: (text: string | number) => text === 1 ? '日' : text === 2 ? '周' : text === 3 ? '月' : '年'
  },
]
const dataSource = [
  {
    "indexes": "1",
    "name": "1",
    "period": "日",
  },
  {
    "indexes": "2",
    "name": "2",
    "period": "周",
  },
  {
    "indexes": "3",
    "name": "3",
    "period": "月",
  },
  {
    "indexes": "4",
    "name": "4",
    "period": "年",
  }
]
const excel = new Excel();

excel
.addSheet('工作表')
.addColumns(columns)
.addDataSource(dataSource)
.save(content => {
  saveAs(content, "example.xlsx");
})

API

addSheet()

addSheet('工作表')

addColumns()

addSheet([
  {
    // 同 antd-table
    title: '标题',
    // 同 antd-table
    dataIndex: 'period',
    // 同 antd-table, 转化为excel的CM
    width: 180,
    // 表头的样式，样式查看请往下
    _style: {},
    // 列样式，样式查看请往下
    _columnStyle: {},
    // 返回单元格样式，返回样式查看请往下
    _cell: (text: string | number, row: any, index: number) => {},
    // 返回内容值
    _renderValue: (text: string | number, row: any, index: number) => {

    },
  }
])

addDataSource()

addDataSource([{
  key: value,
  // 可以统一设置行样式，样式查看请往下
  _style: {}
}])

addRow()

一般用于总计

addRow('总计', [
  {
    money: 'sum' // 求和
  },
  {
    age: {
      formula: 'average', // 求平均
      // 单元格样式，样式查看请往下
      ...style
    }
  },
])

end()

一般用于添加两个 table 之间的空行

setConfig()

一般不用设置，以下为默认值

setConfig({
  // 表头字段，子列的key
  childKey: 'children',
  // 表头字段，数据的key
  key: 'dataIndex',
  // 同一行高，单位CM
  rowHeight: 0.8
})

单元格样式

// 合并行数目
rowSpan?: number
// 合并列数目
colSpan?: number
// 保留小数个数，为了快速设置numFmt，以传入numFmt为准
fixed?: number
// 是否是百分比，为了快速设置numFmt，以传入numFmt为准
isPercent?: boolean
// 字体颜色，需要加上'ff'，例如'ff333333'
color?: string
// 字体，例如 'Microsoft YaHei'，默认设置windows系统为微软雅黑，苹果系统为苹方-简
family?: string
// 自动换行，默认为ture
wrapText?: ture
// 背景颜色，需要加上'ff'，例如'ff333333'
background?: string
// 字体加粗
bold?: boolean
// 边框 | 具体的边框(见下方)
border?: boolean | IBorderStyle
// 水平对齐
align?: 'general' | 'left' | 'center' | 'right'
// 垂直对齐
vertical?: 'general' | 'top' | 'bottom' | 'center'
// 单元格类型，以传入为准，当有数字时默认设置为'TypeNumeric'
cellType?:
  | 'TypeString'
  | 'TypeBool'
  | 'TypeNumeric'
  | 'TypeDate'
  | 'TypeFormula'
  | 'TypeError'
  | 'TypeGeneral'
// 数字格式，和Excel软件相同
numFmt?:
  | 'general'
  | '0'
  | '0.0'
  | '0.00'
  | '0.000'
  | '0.0000'
  | '#,##0'
  | '#,##0.0'
  | '#,##0.00'
  | '#,##0.000'
  | '#,##0.0000'
  | '0%'
  | '0.0%'
  | '0.00%'
  | '0.000%'
  | '0.0000%'
  | '0.00e+00'
  | '# ?/?'
  | '# ??/??'
  | 'mm-dd-yy'
  | 'd-mmm-yy'
  | 'd-mmm'
  | 'mmm-yy'
  | 'h:mm am/pm'
  | 'h:mm:ss am/pm'
  | 'h:mm'
  | 'h:mm:ss'
  | 'm/d/yy h:mm'
  | '#,##0 ;(#,##0)'
  | '#,##0 ;[red](#,##0)'
  | '#,##0.00;(#,##0.00)'
  | '#,##0.00;[red](#,##0.00)'
  | '_(* #,##0_);_(* (#,##0);_(* "-"_);_(@_)'
  | '_("$"* #,##0_);_("$* (#,##0);_("$"* "-"_);_(@_)'
  | '_(* #,##0.00_);_(* (#,##0.00);_(* "-"??_);_(@_)'
  | '_("$"* #,##0.00_);_("$"* (#,##0.00);_("$"* "-"??_);_(@_)'
  | 'mm:ss'
  | '[h]:mm:ss'
  | 'mmss.0'
  | '##0.0e+0'
  | '@'
// 公式，传入该字段时，单元格类型自动设置为'TypeFormula'
formula?: string

// 边框样式
interface IBorderStyle {
  top: boolean
  left: boolean
  bottom: boolean
  right: boolean
  color?: string
}