File Writing Reactjs Without server side language

Question

I am working on reactjs project where the application, for now, need to be run locally due to some limitation we cant make it live yet until we got some permission. Using the Client side I upload the excel file read data and store in variable and distribute the data in the app. But I am facing issue regarding file writing. Is it possible to do file writing on Client side?

import "./styles.css";
import * as XLSX from "xlsx";
import { useState } from "react";

export default function App() {
  const [add, setAdd] = useState("");

  const writeData = () => {
    const f = new File(["array"], add);
    const workbook = XLSX.readFile(f);
    const sheet = workbook.Sheets[workbook.SheetNames[0]];
    sheet["H1"].v = "new value add";
    XLSX.writeFile(workbook, add);
  };

  const uploadFile = (e) => {
    let file = e.target.files[0];
    setAdd(URL.createObjectURL(file));
    const reader = new FileReader();
    reader.onload = (e) => {
      const data = e.target.result;
      const workbook = XLSX.read(data, { type: "array" });
      const patientSheet = workbook.SheetNames[0];
      const worksheet1 = workbook.Sheets[patientSheet];
      const patient = XLSX.utils.sheet_to_json(worksheet1);
      console.log(patient);
    };
    reader.readAsArrayBuffer(file);
  };

  return (
    <div className="App">
      <input type="file" accept=".csv, .xlsx" onChange={uploadFile} />
      <button onClick={writeData}>Write Data</button>
    </div>
  );
}

Answer 1

Yes, it is possible to do file writing on the client side using JavaScript. One way to do this is by using the built-in JavaScript function window.URL.createObjectURL(). This function creates a URL that can be used to download a file. Here is an example of how you can use this function to download a CSV file:

 // Create a link element const link = document.createElement("a"); // Some data const csvData = ['a','b'] // Set the link's href to a data URI containing the CSV data link.href = window.URL.createObjectURL(new Blob([csvData], {type: 'text/csv'})); // Set the link's download attribute to the desired file name link.download = "data.csv"; // Click the link to trigger the download link.click();

This code will create a new link element, set its href to a data URI containing the CSV data, set the download attribute to the desired file name, and then click the link to trigger the download. Note that this solution works only in modern browsers that support the Blob and window.URL.createObjectURL() functions.

Answer 2

Yes. You can. You are using sheetjs for file reading, you can also write with sheetjs.

import * as XLSX from "xlsx";
const ExportToExcel = (yourData) => {
    const worksheet = XLSX.utils.json_to_sheet(yourData); //formate data from JSON to sheet 
    const workbook = XLSX.utils.book_new(); //create new workbook
    //append data to sheet
    const sheetData = XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet Name");
    XLSX.writeFile(workbook, "Name_of_output_file.xlsx"); //after writing file will be downloaded
};