Блог

Я использую функциональность экспортировать все в Excel для экспорта данных таблицы React в лист Excel. Все данные вставляются в строковом формате, но я хотел, чтобы количество записей сохранялось в целочисленном формате, однако оно сохраняется в строковом формате.

Экспортируйте все в код Excel:

 <div id="excelLayer">
    <Workbook filename='DownloadedReport.xlsx' element={<a href="javascript:void(null)" className='excel_div'>Export all to Excel</a>}>
    <Workbook.Sheet data={this.state.data} name="Table Data">
    <Workbook.Column label="From" value="senderID"/>
    <Workbook.Column label="To" value="receiverID"/>
    <Workbook.Column label="Transaction File" value="fileName"/>
    <Workbook.Column label="Transaction Date" value="transationDate"/>
    <Workbook.Column label="Record Count" value="recordCount"/>
    <Workbook.Column label="Status" value="status"/>
    </Workbook.Sheet>
    </Workbook>
</div>
  

Код столбца количества записей таблицы React: этот код используется для сортировки столбцов количества записей.

 {Header: 'Record Count',accessor: 'recordCount', style: {textAlign: "center"},
  sortMethod: (a, b) => {
    if (isNaN(a) || isNaN(b)) {
      return a > b ? 1 : -1;
      }
      return a - b;
    }
  },
  

Экспортированные данные Excel:

Как обработать это в коде, чтобы данные автоматически сохранялись как целое число?

Можете ли вы убедиться, что вы указываете значение RecordCount в виде строки?

Я попытался использовать react-excel-workbook с целочисленными значениями, и загруженный Excel является правильным. И если я использую string, Excel имеет значения в строковом формате.

ПРИМЕЧАНИЕ: Предполагая, что ваш «RecordCount» всегда равен int, я использовал parseInt. Если это может быть значение с плавающей запятой, пожалуйста, измените <Workbook.Column label="recordTotal" value={row => parseInt(row.recordTotal)} /> соответствующим образом.

 import React, { Component } from 'react';
import './App.css';
import Workbook from 'react-excel-workbook'

class App extends Component {

  render() {
    const data1 = [
      {
        recordTotal: '123',
        status: 'Not started',
      },
      {
        recordTotal: '12',
        status: 'in progress',
      },
      {
        recordTotal: '111',
        status: 'Completed',
      }
    ]

    return (
      <div className="App">
        <Workbook filename="example.xlsx" element={<a href="javascript:void(null)" className='excel_div'>Export all to Excel</a>}>
          <Workbook.Sheet data={data1} name="Sheet A">
            <Workbook.Column label="recordTotal" value={row => parseInt(row.recordTotal)}  />
            <Workbook.Column label="status" value="status" />
          </Workbook.Sheet>
        </Workbook>

      </div>
    );
  }
}

export default App;
  

Ниже приведен загруженный Excel.