Sample Example for Frontend: ReactJS + TS with Invoice Example

[sagungargs15]

Hi @Siemienik Please can you point to the example where TS + ReactJS is used for frontend. Invoice example will also do

[Siemienik]

Hello @sagungargs15 , which library are you interested?
Example for xlsx-import is here: https://github.com/Siemienik/XToolset-examples/tree/master/xlsx-import%2Breact

For xlsx-renderer could be found in the tests dir.
Some discussion about using it under browser was here:
#93 (comment)
That should be same for react, just try to use useEffect to achieve that.

[sagungargs15]

@Siemienik Thanks for sharing this. I have run into Browser based issues on excelJS library throwing errors which at the exceljs read stage fails

I am using ReactJS + Typescript and I keep getting errors at the Load stage

i.e
await wb.xlsx.load(reader.result as ArrayBuffer);

I've ran this code and on my system, this is the error I got:
Error: Can't find end of central directory : is this a zip file ? If it is, see https://stuk.github.io/jszip/documentation/howto/read_zip.html
And no, it's not a zip file. I get this error when I ran it with ReactJs + Typescript

REFERENCE CODE:

const wb =  new ExcelJS.Workbook();
await wb.xlsx.load(reader.result as ArrayBuffer);
const importer = new Importer(wb);
setInvoice(onImportInvoice(importer));

Reference Tickets I have raised:
exceljs/exceljs#810 (comment)

[Siemienik]

is the renderer a resoult of xlsx-renderer?
If yes, it is actually ExcelJS Worbook object (source code).

About using ExcelJS in the browser. There is ES5 compatible version, which should work under browsers: exceljs/dist/es5

[sagungargs15]

@Siemienik I am using Dropzone-react to upload an .xlsx via Browser and then pass it to xlsx-import i.e Importer to read via exceljs and somehow it is still failing.

import {workbook} from 'exceljs/dist/es5'

nor

const Excel = require ('exceljs/dist/es5')

dosen't work for me.

I think I am hitting this limitation of exceljs
https://stackoverflow.com/questions/72836814/is-there-any-way-to-use-the-exceljs-javascript-library-for-excel-file-create-an

[Siemienik]

@sagungargs15 would you mind to reproduce your issue on codesandbox ?