ReactJS xlsx-js-style read local xls file

Question

I have an imported file: import ExportReportCardTemplate from "asset/files/excel/report_card_template.xls";

How can I use it with library import * as xlsx from "xlsx-js-style";

I've searching but all I get is reading xls file with input, how can I read a local file and then use it with xlsx?

After following tpliakas' answer, I got this error:

score 1 · Answer 1 · answered Jan 03 '23 at 22:30

First you should read file as a binary string, so you have to do something like this

function readFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      resolve(e.target.result);
    };
    reader.onerror = (e) => {
      reject(e);
    };
    reader.readAsBinaryString(file);
  });
}

Then you should parse this binary string to a workbook:

async function readExcel() {
  // Wait for the binary string first
  const binaryString = await readFile(ExportReportCardTemplate);

  const wb = xlsx.read(binaryString, { type: 'binary' });
  // use the wb here
}

Thank you for answering, I got another error after following your instruction, please see the image above — Huan Huynh, Jan 04 '23 at 15:33

score 0 · Accepted Answer · answered Jan 04 '23 at 15:53

After following tpliakas answer, I had a bit adjustment and finally I can read the local file to workbook data, here is the code:

import ExportReportCardTemplate from "asset/files/excel/report_card_template.xls";
import * as xlsx from "xlsx-js-style";

const readFile = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      resolve(e.target.result);
    };
    reader.onerror = (e) => {
      reject(e);
    };
    fetch(file)
      .then((response) => response.blob())
      .then((file) => reader.readAsBinaryString(file));
  });
};

export const exportReportCardExcel = async (data) => {
  try {
    const binaryString = await readFile(ExportReportCardTemplate);
    const workbook = xlsx.read(binaryString, { type: "binary" });
    console.log("workbook:::", workbook);
  } catch (error) {
    console.log("error:::", error);
  }
};

ReactJS xlsx-js-style read local xls file

2 Answers2