Как экспортировать данные в Excel, используя реагирующие библиотеки

Question

Я использую react-html-to-excel для преобразования моей таблицы в excel, но я хочу, чтобы не экспортировать первый столбец в excel, т.е. первый столбец не должен экспортироваться в excel. Я ознакомился с документацией этой библиотеки. Я использую , но ничего не нашел

Мой код

 <div className="App">
      <ReactHTMLTableToExcel
        id="test-table-xls-button"
        className="download-table-xls-button"
        table="table-to-xls"
        filename="test"
        sheet="tablexls"
        buttonText="Download as XLS"
      />
      <table id="table-to-xls">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr>
              <td>{item.firstname}</td>
              <td>{item.lastname}</td>
              <td>{item.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

Ссылка кодов и полный код коробки

Если это не поддерживается в этой библиотеке, тогда я открыт для использования любой другой библиотеки, которая делает подобные вещи.

Answer 1

Я могу предложить следующие два модуля, поскольку я уже успешно использовал их в производстве (также с настраиваемыми столбцами):

1. response-data-export
2. Reaction-CSV

И третий, после быстрого поиска, который выглядит многообещающе (хотя я не использовал его)

act-export-excel

Используемая в настоящее время библиотека не поддерживает удаление столбцов в файле Excel в соответствии с этой проблемой , который также предлагает четвертый вариант:

act-csv-creator

EDIT : Хорошо, я создал два примера. Первый может быть найден здесь и использует мое предложение 2 ^nd , react-csv

Второй следующий, который использует мой 3 ^rd предложение, react-export-excel

2 ^и РЕДАКТИРОВАТЬ : я обновил оба примера, теперь столбцы определены из структуры вашего объекта и два способа удаления предлагаются нежелательные столбцы (по значению ключа firstname или по индексу - 1 ^st one).

Обратите внимание, что описанные выше методы будут работать успешно, если структура объектов соответствует вашим данным (каждая запись должна иметь одинаковые столбцы).

Метод camelCase, который я использовал в обоих примерах, взят из здесь .

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import ReactExport from "react-export-excel";
const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;

function App () {

    const data = [
        { firstname: "jill", lastname: "smith", age: 22 },
        { firstname: "david", lastname: "warner", age: 23 },
        { firstname: "nick", lastname: "james", age: 26 }
    ];

    const camelCase = (str) =>  {
        return str.substring(0, 1).toUpperCase() + str.substring(1);
    };

    const filterColumns = (data) => {
        // Get column names
        const columns = Object.keys(data[0]);

        // Remove by key (firstname)
        const filterColsByKey = columns.filter(c => c !== 'firstname');

        // OR use the below line instead of the above if you want to filter by index
        // columns.shift()

        return filterColsByKey // OR return columns
    };

    return (
        <div className="App">
            <ExcelFile filename="test">
                <ExcelSheet data={data} name="Test">
                    {
                        filterColumns(data).map((col)=> {
                            return <ExcelColumn label={camelCase(col)} value={col}/>
                        })
                    }
                </ExcelSheet>
            </ExcelFile>
            <table id="table-to-xls">
                <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Age</th>
                </tr>
                </thead>
                <tbody>
                {data.map(item => {
                    return (
                        <tr>
                            <td>{item.firstname}</td>
                            <td>{item.lastname}</td>
                            <td>{item.age}</td>
                        </tr>
                    );
                })}
                </tbody>
            </table>
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

Вы можете создать простой хак для манипулирования кодом таблицы HTML путем переопределения функции ReactHTMLTableToExcel.format, которая получает таблицу HTML для форматирования документа XLS.

ReactHTMLTableToExcel.format = (s, c) => {
  // If there is a table in the data object
  if (c && c['table']) {
    // Get the table HTML
    const html = c.table;

    // Create a DOMParser object
    const parser = new DOMParser();

    // Parse the table HTML and create a text/html document
    const doc = parser.parseFromString(html, 'text/html');

    // Get all table rows
    const rows = doc.querySelectorAll('tr');

    // For each table row remove the first child (th or td)
    for (const row of rows) row.removeChild(row.firstChild);

    // Save the manipulated HTML table code
    c.table = doc.querySelector('table').outerHTML;
  }

  return s.replace(/{(\w+)}/g, (m, p) => c[p]);
};

И у вас есть таблица HTML, отфильтрованная и удаленная с первым столбцом.

Вы можете проверить эту работу в этом проекте Stackblitz .