如何将反应表导出到以自定义标题作为列的 excel 文件

Question

import React, { useEffect, useState } from 'react';
import * as XLSX from 'xlsx'
import { useQuery } from '@tanstack/react-query';

const Excl = ({userDatas}) => {


    let xlDatas = []

    const handleExportExcl = (userDatas) => {
        userDatas.map(xlData => {
            xlDatas.push(xlData)
        })
  
        const wb = XLSX.utils.book_new(),
            ws = XLSX.utils.json_to_sheet(xlDatas)
        XLSX.utils.book_append_sheet(wb, ws, "MySheet");
        XLSX.writeFile(wb, "MyExcel.xlsx")
    }

    return (
        <span onClick={() => handleExportExcl(userDatas)} ><span className='flex justify-center items-center'> <span className='mr-3'></span>EXCEL </span> </span>
    );
};

export default Excl;

I want an excel sheet with the custom title as a column. Here is my code. I take userDatas from another component.

Answer 1

This is the example in https://www.npmjs.com/package/xlsx-lite .

import XLSX from 'xlsx-lite';

// Create a workbook
const xlsx = new XLSX();

// Add a sheet to workbook
const sheet = xlsx.sheet('Sheet Name');

// Change sheet styles
sheet.style({
  rtl: true,
});

// Set values
sheet.row(1).col(1).set('foo');
sheet.cell(1, 2).set('bar');
sheet.set('baz', { row: 1, col: 3 });
sheet.cell(1, 4).set([
  'r1',
  ['r2,c4', 'r2,c5', 'r2,c6'],
  'r3',
])

// Get values
console.log(sheet.row(1).col(1).get()); // foo
console.log(sheet.get({ row: 1, col: 2 })); // bar

// Add styles
const someStyles = xlsx.style({
  color: '#f00',
  fontFamily: 'Baloo Bhaijaan',
  fontWeight: 'bold',
  fontSize: 14,
  textDecoration: 'line-through',
  fontStyle: 'italic',
  backgroundColor: '#ff0',
  textAlign: 'center',
  verticalAlign: 'middle',
  borderStyle: 'double',
  borderColor: '#00f',
});
sheet.set('styled', {
  row: 2,
  col: 1,
  style: someStyles,
});

// Set and get row height
sheet.row(2).height(100);
console.log(sheet.row(2).height()); // 100

// Set and get column width
sheet.col(1).width(20);
console.log(sheet.col(1).width()); // 20

// Add filters
sheet.addFilter({
  from: { row: 1, col: 1 },
  to: { row: 7, col: 1 },
});

// Download the result
xlsx.save('test.xlsx');