Excel file from server to client | Javascript

Question

What I want to do: I have on the server side a file 'test_download.xlsx', and want to send it to the client side so that I can apply XLSX.read() on the retrieved object.

So I tried it this way

Server :

let filename = 'test_download.xlsx';
const buffer = fs.readFileSync(filename)
res.json(buffer);

Client :

file = await axios.get('/dataexplorer/test');
console.log(file);
console.log(XLSX.read(file.data, {type: "buffer"}));

First log :

Second log :

The problem is that it doesn't match my excel file at all just in terms of sheets (my file has 3 different sheet names) Do you have any idea what the problem is?

Thanks

Alex · Accepted Answer · 2021-11-02 13:27:25Z

1

On the server-side just use:

const filename = 'test_download.xlsx';
// make sure to include the name and the extension of the file in the path
const filepath = 'your/path/to/the/file/test_download.xlsx';
/** filename is optional: 
 * if you don't pass it, the name of the file in the filepath will be used
 * if you pass it the file at hte filepath will be downloaded with the name of `filename`
 */
res.download(filepath, filename);

This will return a blob to the client(make sure to include the correct headers for the response type) and then you can just save it or work with it with :

file = await axios.get('/dataexplorer/test',{ responseType: "blob"});
const ab = await file.data.arrayBuffer();
XLSX.read(Buffer.from(ab),{type:"buffer"})

edited Nov 2, 2021 at 13:27

Alex

3471 silver badge22 bronze badges

answered Oct 28, 2021 at 9:29

eroironico

1,4307 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Alex Over a year ago

Thanks Nick, what is the correct header to use when returning a blob ? I used

res.setHeader('Content-disposition', 'attachment; filename=' + filename); res.setHeader('Content-type', 'application/octet-stream');

but doesn't work.

eroironico Over a year ago

Sorry, i've been unclear, with response type header i meant on the client, when you're sending the request to the server, i'm using angular and with that it looks like this: this.http.get(`/api/v1/documents/${doc.id}`, { responseType: "blob" })

Alex Over a year ago

It doesn't seem to work. I have a blob in file : data: Blob {size: 11948, type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'} but when i call XLSX.read on file.data i got TypeError: t.replace is not a function. I tried XLSX.read(await file.data.arrayBuffer(),{type:"array"} but got Error: Corrupted zip : can't find end of central directory

eroironico Over a year ago

I'm finding hard to understand the logic behind your program, the last things i can say are: a) be sure that the blob it's not corrupted; b) parse the blob in another, more usable, format(not buffer); c) last but not least maybe change your res.download to another method to send a stream instead of a blob. That's all, i would like to help you more but i can't understand where the error is coming from, i'm sorry

Alex Over a year ago

"Corrupted zip : can't find end of central directory" was an error due to the file downloading on the server side. Your solution works otherwise thanks !

|

Collectives™ on Stack Overflow

Excel file from server to client | Javascript

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related