I have been able to convert a JSON response to CSV to be downloaded via the following function below after parsing the data and joining via a seperate function. The below function works great and the CSV file can be downloaded in the proper Japanese format that I need which is what the 'Encoding' object is. What I can't seem to figure out is how to convert either the JSON data into an xlsx file for download in a similar fashion on the front end, OR to convert the below CSV file into xlsx on the front end as well to allow the download of the same file into xlsx format. When I open the CSV file in excel, I can simply save as xlsx file and it works perfectly fine. Is there a way to create this functionality on the front end via JS/TS for a React based web application? I have looked into this and seems like a lot of responses online have been to convert this in nodeJS but I am looking to have this conversion and download capability purely on the front end since I am using create react app and retrieving the JSON data via an axios call to be used in making the CSV and xlsx file.

export const downloadCsv = async (data: string, fileName: string) => {
  const unicodeList = data.split('').map((x, i) => data.charCodeAt(i));
  const sjisArray = Encoding.convert(unicodeList, {
    to: 'SJIS', 
    from: 'UNICODE',
  });
  const blob = new Blob([new Uint8Array(sjisArray)], { type: 'text/csv'});
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.setAttribute('hidden', '');
  a.setAttribute('href', url);
  a.setAttribute('download', `${fileName}.csv`);
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

I have been able to convert a JSON response to CSV to be downloaded via the following function below after parsing the data and joining via a seperate function. The below function works great and the CSV file can be downloaded in the proper Japanese format that I need which is what the 'Encoding' object is. What I can't seem to figure out is how to convert either the JSON data into an xlsx file for download in a similar fashion on the front end, OR to convert the below CSV file into xlsx on the front end as well to allow the download of the same file into xlsx format. When I open the CSV file in excel, I can simply save as xlsx file and it works perfectly fine. Is there a way to create this functionality on the front end via JS/TS for a React based web application? I have looked into this and seems like a lot of responses online have been to convert this in nodeJS but I am looking to have this conversion and download capability purely on the front end since I am using create react app and retrieving the JSON data via an axios call to be used in making the CSV and xlsx file.

export const downloadCsv = async (data: string, fileName: string) => {
  const unicodeList = data.split('').map((x, i) => data.charCodeAt(i));
  const sjisArray = Encoding.convert(unicodeList, {
    to: 'SJIS', 
    from: 'UNICODE',
  });
  const blob = new Blob([new Uint8Array(sjisArray)], { type: 'text/csv'});
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.setAttribute('hidden', '');
  a.setAttribute('href', url);
  a.setAttribute('download', `${fileName}.csv`);
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

• javascript
• reactjs
• excel
• typescript
• csv

1 Answer 1

You can use xlsx package:
Edit : sandbox

import XLSX from 'xlsx';

  const downloadxls = (data)=>{
    let ws = XLSX.utils.json_to_sheet(data);
    let wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "sheet");
    let buf = XLSX.write(wb, {bookType:'xlsx', type:'buffer'}); // generate a nodejs buffer
    let str = XLSX.write(wb, {bookType:'xlsx', type:'binary'}); // generate a binary string in web browser
    XLSX.writeFile(wb, `myfilename.xlsx`);
}