React js xlsx file download

Question

i am trying to download file from API response and the API response is same as below.

Ship To Account Name,Bill To Number,Ship To Number,Customer Ship To Code,Street Address,Address Line 2,Address Line 3,City,State,Postal Code,Country
"INVITROGEN TEST INDUSTRIAL US_102620","277486","277488","test1234","TEST ONLY","DO NOT RELEASE ORDERS","","FREDERICK","MD","21704","us"
"MEMED DIAGNOSTICS LTD.","69948433","69948429","","5 NAHUM HETH ST.",".","PARK HIGH-TECH NORTH","HAIFA","","39120","il"
"MEMED DIAGNOSTICS LTD.","69948433","69948429","90123","5 NAHUM HETH ST.",".","PARK HIGH-TECH NORTH","HAIFA","","39120","il"
"UNIV OF CALIFORNIA IRVINE","69517726","69517735","9238","",".","SCHOOL OF LAW BLDG","IRVINE","CA","92697","US"
"UNIV OF CALIFORNIA IRVINE","69517726","69528870","9967","100 THEORY DR",".","","IRVINE","CA","92617","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528870","9206","100 THEORY DR",".","","IRVINE","CA","92617","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528870","9921","100 THEORY DR",".","","IRVINE","CA","92617","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528871","9224","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528871","9234","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528871","9225","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528871","9237","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528871","9227","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528871","9236","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528871","9226","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528871","9305","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528871","9231","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69528871","9232","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
"UNIV OF CALIFORNIA IRVINE","69517726","69517735","9128","",".","SCHOOL OF LAW BLDG","IRVINE","CA","92697","US"
"UNIV OF CALIFORNIA IRVINE","69517726","69517735","9320","",".","SCHOOL OF LAW BLDG","IRVINE","CA","92697","US"
"UNIV OF CALIFORNIA IRVINE","69517726","69517735","9080","",".","SCHOOL OF LAW BLDG","IRVINE","CA","92697","US"

Above is the response i am getting after success of API call.

react code:

const resp = `Ship To Account Name,Bill To Number,Ship To Number,Customer Ship To Code,Street Address,Address Line 2,Address Line 3,City,State,Postal Code,Country
  "INVITROGEN TEST INDUSTRIAL US_102620","277486","277488","test123","TEST ONLY","DO NOT RELEASE ORDERS","","FREDERICK","MD","21704","us"
  "MEMED DIAGNOSTICS LTD.","69948433","69948429","","5 NAHUM HETH ST.",".","PARK HIGH-TECH NORTH","HAIFA","","39120","il"
  "MEMED DIAGNOSTICS LTD.","69948433","69948429","90123","5 NAHUM HETH ST.",".","PARK HIGH-TECH NORTH","HAIFA","","39120","il"
  "UNIV OF CALIFORNIA IRVINE","69517726","69517735","9238","",".","SCHOOL OF LAW BLDG","IRVINE","CA","92697","US"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528871","9903","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528870","9907","100 THEORY DR",".","","IRVINE","CA","92617","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528870","9967","100 THEORY DR",".","","IRVINE","CA","92617","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528870","9206","100 THEORY DR",".","","IRVINE","CA","92617","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528870","9921","100 THEORY DR",".","","IRVINE","CA","92617","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528871","9224","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528871","9234","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528871","9225","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528871","9237","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528871","9227","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528871","9236","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528871","9226","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528871","9305","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528871","9231","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69528871","9232","-",".","PSYCHIATRY TRAILER N. CAMPUS","IRVINE","CA","92612","us"
  "UNIV OF CALIFORNIA IRVINE","69517726","69517735","9128","",".","SCHOOL OF LAW BLDG","IRVINE","CA","92697","US"`;

  const url = window.URL.createObjectURL(new Blob([resp], { type: 'octet/stream' }));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'B2B_Partner.xlsx'); //or any other extension
  document.body.appendChild(link);
  link.click();
  link.parentNode.removeChild(link);
  console.log("link", link);

So here once I am hitting download button its call above code, file B2B_Partner.xlsx is getting downloaded but whenever i am trying to open xlsx file its showing as per below image

Try changing `octet/stream` to a more appropriate mime type for excel? https://stackoverflow.com/questions/974079/setting-mime-type-for-excel-document — kendavidson, Apr 30 '21 at 15:43
What you have is not .xlsx file, it is CSV file, change extension to .csv. XLSX file format is far beyond text (create a normal xlsx file with data and open that in Notepad++ - you will udnerstand what i mean) — Nikita Chayka, Apr 30 '21 at 16:03
@NikitaChayka, you mean the response data i have that is not for xlsx file format? — Sanjay Tiwari, Apr 30 '21 at 16:15
@SanjayTiwari exactly, this is a CSV format, not XLSX format. But still Excel Application can open CSV files, if you do correct exension - which is .csv — Nikita Chayka, Apr 30 '21 at 16:24
@NikitaChayka, can you please provide any response data for xlsx format, so that i can tell my team with proper answer.? — Sanjay Tiwari, Apr 30 '21 at 16:27
You can use https://github.com/SheetJS/sheetjs to set up an actual xlsx file and download it. — Zachary Haber, Apr 30 '21 at 16:47
Now this issue is resolved... first passing payload as decode like below code .. ```export const downloadResults = (data) => { return api.fetch(DOWNLOAD_RESULTS, api.config.downloadResult(), { ...api.http.post(data), payload: { decode: 'text' } }); }; ``` then while parsing json change code like this --- ```if (payload.decode === 'text') { return response.text(); } ``` — Sanjay Tiwari, May 07 '21 at 12:32

score 0 · Answer 1 · answered May 07 '21 at 12:39

This issue is resolved while passing payload as decode: text like below code ...

export const downloadResults = (data) => {
  return api.fetch(DOWNLOAD_RESULTS, api.config.downloadResult(), {
    ...api.http.post(data),
    payload: { decode: 'text' }
  });
};

and after that once its deployed into server I was facing json parse error at 0 position, so solved that issue also after adding below code ...

const parseJSON = (response, payload = {}) => {
  let json;

  if (response.status === 204 || payload.decode === 'blob') {
    return response.blob();
  }

  if (payload.decode === 'text') {
    return response.text();
  }

  try {
    json = response.json();
  } catch (e) {
    throw new Error(e);
  }
  return json;
};

React js xlsx file download

1 Answers1