XLSX with web-worker using react #3064

New Issue

pagarrohan · 2024-01-26T11:12:01Z

pagarrohan commented

2024-01-26 11:12:01 +00:00

Hi Im working on react project bootstrapped by webpack-5 . There is one button in component on click of that button we are calling an api which result array of objects and once we get result with the help of XLSX we are converting them into excel file and downloading it . This functionality works perfectly fine . but due blocking of main thread UI gets freeze/hand and once it complete then all UI work fine .

Now I'm trying to off load excel conversion to the worker for that I've created one file called excelWorker.ts
and in that file Im calling that excel conversion function .as function need XLSX dependency so that in same file i have imported XLSX .like this way import * as XLSX from "xlsx";

my worker code look like this

import * as XLSX from "xlsx";

 exportToExcel = () => {
    const data = [
      { name: "John",age: 30,city: "New York",},
      { name:"John",age: 25,city: "San Francisco",},
    ];
    
    const ws = XLSX.utils.json_to_sheet(data);
    const range = XLSX.utils.decode_range(ws["!ref"]);
    for (let C = range.s.c; C <= range.e.c; ++C) {
      let maxColWidth = 0;
      for (let R = range.s.r; R <= range.e.r; ++R) {
        const cellAddress = XLSX.utils.encode_cell({ r: R, c: C });
        const cellContent = ws[cellAddress] ? ws[cellAddress].v : "";
        const cellWidth = cellContent.toString().length;
        maxColWidth = Math.max(maxColWidth, cellWidth);
      }
      ws["!cols"] = ws["!cols"] || [];
      ws["!cols"][C] = { wch: maxColWidth + 1 }; 
    }
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, `xported_data.xlsx`);
  };

As some how my react throwing error that it is unable to understand this line import * as XLSX from "xlsx";

My worker js code completely works fine when I perform simple task like addition , sorting and filtering which does not depend on XLSX but the task which requird XLSX is not working .

Could you please help me how can I make use of XLSX in worker file .or any example for reference .

Hi Im working on react project bootstrapped by webpack-5 . There is one button in component on click of that button we are calling an api which result array of objects and once we get result with the help of XLSX we are converting them into excel file and downloading it . This functionality works perfectly fine . but due blocking of main thread UI gets freeze/hand and once it complete then all UI work fine . Now I'm trying to off load excel conversion to the worker for that I've created one file called excelWorker.ts and in that file Im calling that excel conversion function .as function need XLSX dependency so that in same file i have imported XLSX .like this way **import * as XLSX from "xlsx";** my worker code look like this ```js import * as XLSX from "xlsx"; exportToExcel = () => { const data = [ { name: "John",age: 30,city: "New York",}, { name:"John",age: 25,city: "San Francisco",}, ]; const ws = XLSX.utils.json_to_sheet(data); const range = XLSX.utils.decode_range(ws["!ref"]); for (let C = range.s.c; C <= range.e.c; ++C) { let maxColWidth = 0; for (let R = range.s.r; R <= range.e.r; ++R) { const cellAddress = XLSX.utils.encode_cell({ r: R, c: C }); const cellContent = ws[cellAddress] ? ws[cellAddress].v : ""; const cellWidth = cellContent.toString().length; maxColWidth = Math.max(maxColWidth, cellWidth); } ws["!cols"] = ws["!cols"] || []; ws["!cols"][C] = { wch: maxColWidth + 1 }; } const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); XLSX.writeFile(wb, `xported_data.xlsx`); }; ``` As some how my react throwing error that it is unable to understand this line import * as XLSX from "xlsx"; My worker js code completely works fine when I perform simple task like addition , sorting and filtering which does not depend on XLSX but the task which requird XLSX is not working . Could you please help me how can I make use of XLSX in worker file .or any example for reference .

sheetjs commented

2024-01-26 15:15:46 +00:00

https://docs.sheetjs.com/docs/demos/bigdata/worker examples.

Your error suggests webpack isn't bundling the worker script. The simplest solution is to use importScripts and point to the standalone build (https://docs.sheetjs.com/docs/getting-started/installation/standalone#web-workers)

Also note that writeFile will not work from a web worker. See the "Creating a Local File" example for a workaround where file data is written in the worker and sent back to the main thread for download.

https://docs.sheetjs.com/docs/demos/bigdata/worker examples. Your error suggests webpack isn't bundling the worker script. The simplest solution is to use `importScripts` and point to the standalone build (https://docs.sheetjs.com/docs/getting-started/installation/standalone#web-workers) Also note that `writeFile` will not work from a web worker. See the "Creating a Local File" example for a workaround where file data is written in the worker and sent back to the main thread for download.

sheetjs closed this issue

2024-01-26 15:15:46 +00:00

Sign in to join this conversation.