AntD 表格导出 Excel数据

页面上的表格导出为excel

这里用了antd的表格和js-export-excel插件, 以此记录

1.引入插件

npm install js-export-excel

2.检查引入版本

！这里用的是1.1.4

3.页面引用

import ExportJsonExcel from 'js-export-excel';

4.使用

// 导出数据
const outDataFun = () => {
  let option = {}, sheetFilter = [], sheetHeader = []
  
	// dataSource  表格数据
  // dataSeries  表格列
  if(dataSeries){
    dataSeries.map(d_item => {
      sheetFilter.push(d_item.name)
      sheetHeader.push(d_item.title)
    })
  }

  option.fileName = '文件名称'
  option.datas = [
    {
      sheetData: dataSource ?? [],
      sheetName: 'sheet',
      sheetFilter,  //数据列
      sheetHeader,  //数据列对应中文名称
    }
  ];
  let toExcel = new ExportJsonExcel(option);
  toExcel.saveExcel();
  console.log('导出数据',option)
}

这里使用了antd的图标 和 Popover组件

{/* 导出按钮 */}
<span className='outDataBtn'>
  <Popover
    trigger="click"
    // visible={showOutDataBtn}
    placement="rightTop" //leftTop
    getPopupContainer={(HTMLElement) => HTMLElement}
    content={
      <div className='outDataMenu'>
        <span className='disabled'>复制导出数据</span>
        <span onClick={() => {
        setShowOutDataBtn(false)
        outDataFun()
      }}>下载导出数据</span>
      </div>
    } title="">
    {/* onClick={() => setShowOutDataBtn(!showOutDataBtn)}  */}
    <MoreOutlined />
  </Popover>
</span>

附上表格部分导出按钮样式

// 导出数据按钮
.outDataBtn{
  position: absolute;
  z-index: 10;
  font-size: 20px;
  cursor: pointer;
  color: #878787;
  .ant-popover-inner{border-radius: 5px;}
  .ant-popover-inner-content{
    padding: 3px;
    .outDataMenu{
      .disabled{
        cursor:no-drop;
        color: #ccc;
      }
      span{
        padding: 5px 10px;
        white-space: nowrap;
        display: inline-block;
        transition: .5s;
        border-radius: 5px;
        cursor: pointer;
        &:not(.disabled){
          &:hover{background-color: #cccccc46;}
        }
      }
    }
  }

}

5.看效果

页面

控制台输出

Excel