Check xlsx-renderer browser support

[Siemienik]

Working code provided here: #93 (comment)

TODO:

• Add into xlsx-renderer possibility to render from ArrayBuffer. #135 Add function to load directly from ArrayBuffer
• Add at least one example with xlsx-renderer runned on browser + test

[watanabethais]

Hi!
I'm really interested in using your library in my React project.
Do you have plans to support React?

[Siemienik]

@watanabethais ofc yes, I'm going to check all most popular frontend frameworks - probably for this I need to add a bundler like webpack. However in the case of React I suppose that xlsx-renderer should works (React apps usually uses babel which should bundle and compile properly code from installed node_module - but I hasn't checked it yet and any test to prove browser supports isn't existed yet. I will add it soon. )

Additionally ExcelJS (the only one dependency here) works pretty in browsers, so it shouldn't make problem here.

If did you do any attempts to use it under React, I will be really happy for feedback 🤓

[watanabethais]

@Siemienik Thanks for the quick response!

Actually I tried to use the library in my React project, but I don't know if I'm using correctly because it gives me the error:
TypeError: Cannot read property 'F_OK' of undefined

After researching, I've found this error in the exceljs/exceljs repository.
But I don't know how to solve or what I'm doing wrong...

[Siemienik]

@watanabethais could I ask you to create (or link) issue from exceljs - I will investigate it

[Siemienik]

@watanabethais please try to use this workaround for this moment, it has chance to works 🤞

import {Renderer} from 'xlsx-renderer';
const renderer = new Renderer();

const viewModel = { awesome:"Oh yeah!", items:[/*...*/] };

const resultWorkbook = await renderer.render(()=>{
     /** read file following exceljs doc: @see https://github.com/exceljs/exceljs#reading-xlsx */
     return workbook.xlsx.load(data.buffer).catch();
}, viewModel);

[watanabethais]

@Siemienik I really appreciate your help! But...

I don't know where data.buffer comes from... how do I get a local file in my project to load from buffer?
There's a way to load the file without uploading the file?

[Siemienik]

There's a way to load the file without uploading the file?

Browsers hasn't access to local files (as long as their aren't hosted - then it is able to getting file by using fetch).

If is acceptable for you to upload a file, this post may be helpful for you:
exceljs/exceljs#832 (comment)

[Siemienik]

@watanabethais I've just upgraded ExcelJS to 4.2.0, this should resolve your issues

[watanabethais]

@Siemienik Sorry for the late response, I only had time to test today. And I made it work using the code below:

import { Renderer } from "xlsx-renderer";
import { Workbook } from "exceljs";
import { saveAs } from "file-saver";

...

async function onRetrieveTemplate() {
    return fetch("./hts-template.xlsx").then((r) => r.blob());
}

async function generateReport() {
    onRetrieveTemplate().then((xlsxBlob) => {
      const reader = new FileReader();
      reader.readAsArrayBuffer(xlsxBlob);
      reader.addEventListener("loadend", async (e) => {
        const renderer = new Renderer();
        const workbook = new Workbook();
        const viewModel = { /* data */ };

        const result = await renderer.render(() => {
          return workbook.xlsx.load(reader.result).catch();
        }, viewModel);

        await result.xlsx.writeBuffer()
          .then((buffer) => saveAs(new Blob([buffer]), `${Date.now()}_result_report.xlsx`))
          .catch((err) => console.log("Error writing excel export", err));
      });
    });
 }

Thank you so much for your help! Now I'm going to fully implement the template :)

[Siemienik]

@watanabethais that great information 😄 Thank you for an information 🥇

[jacekkoziol]

I was trying to use the xlsx-renderer in the Browser but it works only partially, I mean the XLSX generates base on the template with provided data, but when it comes to loop it stops interpret the variables. For testing I have used this sample: https://github.com/Siemienik/XToolset/tree/master/packages/xlsx-renderer/tests/integration/data/Renderer005-ForEach-simple and as result I'm getting something like this:

Any idea how to solve the problem?