Function to call export excel doesn't' works!

[mantegnous]

import { default as ExcelFile, ExcelSheet, ExcelColumn } from "react-data-export";

exportExcel = () =>{
      console.log('funzione')
      return(
        <ExcelFile hideElement={true} filename={'Lista Movimenti'+new Date()}>
          <ExcelSheet data={this.state.movimenti} name="Movimenti" >
            <ExcelColumn label="Causale" value="causaleShort"/>
            <ExcelColumn label="Azienda" value="azienda"/>
            <ExcelColumn label="Merchant" value="merchant"/>
            <ExcelColumn label="Data" value="data"/>
            <ExcelColumn label="Importo" value="importo"/>
          </ExcelSheet>
        </ExcelFile>
      )}

No works.. why?

[shal-xu]

Need to import like this (see example):

import React from "react";
import ReactExport from "react-data-export";

const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;

[b-asaf]

I encounter the same issue. In order to resolve all the issues after adding the package to my project I had to:

1. Adding to webpack config (using webpack 4):

....
    node: { fs: 'empty' },
    externals: [
        { './cptable': 'var cptable' },
        { './jszip': 'jszip' },
    ],
...

2. Add xlsx package to solve issue #90 (as the answer suggested): yarn add xlsx

3. The code to export is:

...
import ReactExport from "react-data-export";
..
const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;

class MyClass extends Component {
....
    exportData = async () => {
         const entries = await this.props.getData();

        return (
            <ExcelFile>
                <ExcelSheet data={entries} name="Data">
                    <ExcelColumn label="Name" value="name" />
                    <ExcelColumn label="Time" value="time" />
                    <ExcelColumn label="ID" value="uniqeId" />
                    <ExcelColumn label="Action" value="action" />
                </ExcelSheet>
            </ExcelFile>
        );
}
.....
render() {
    return (
        ...
         <Button onClick={this.exportData}>Export Data<Button>
    )
 }

[KienPM]

I have the same issue, any one solved this?

[b-asaf]

I am using different solution, I am using xlsx package directly:

import XLSX from 'xlsx';

export default (data, fileName) => {
    // create a new blank workbook
    const workBook = XLSX.utils.book_new();

    // convert from json to worksheet
    const workSheet = XLSX.utils.json_to_sheet(data);

    // insert worksheet into workbook
    XLSX.utils.book_append_sheet(workBook, workSheet, [sheetName]);

    // download file
    XLSX.writeFile(workBook, `${fileName}.xlsx`);
};