Download zip file from nodejs with vuejs

Question

I am trying download a zip file from nodejs using vuejs.

My problem is that I have a weird underscore around the fileName when the dialog appears.

If I set manually:

const fileName="xmlFile.zip";

I have no problem.

I attached an image of the problem.

Here is the headers returnning from node:

Accept-Ranges: bytes Access-Control-Allow-Origin: * Access-Control-Expose-Headers: Content-Disposition Cache-Control: public, max-age=0 Connection: keep-alive Content-Disposition: attachment; filename="xmlFile.zip" Content-Length: 164 Content-Type: application/zip Date: Sun, 19 Jul 2020 13:55:15 GMT ETag: W/"a4-17367574de4" Last-Modified: Sun, 19 Jul 2020 13:50:41 GMT X-Powered-By: Express

What am I doing wrong?

 //vuejs front end let response = await axios.post('/generateLoteXMLZIPConsulta');; let blob = await new Blob([response.data], { type: "application/zip", }); const link = document.createElement("a"); link.style.display = "none"; link.href = window.URL.createObjectURL(blob); const fileName = response.headers["content-disposition"].match( /filename=(.*)/ )[1]; link.download = fileName; link.click(); window.URL.revokeObjectURL(link.href); //backend nodejs router.post("/generateLoteXMLZIPConsulta", async (req, res) => { .... .... res.download( path.resolve(__dirname, "../../file.zip"), "xmlFile.zip" ); })

could you please post the HTTP requests's response that you're getting from node? There should be a header like this: "Content-Disposition": "attachment;filename=your-file-name.zip". This way we'll figure out, on what side the problem is - node or vue. — Alex Shchur
– Alex Shchur, Commented Jul 19, 2020 at 6:29
@Alex I edited my question and I added the headers coming from nodejs. — Luiz Alves
– Luiz Alves, Commented Jul 19, 2020 at 13:58
I found the problem. I dont know why, but fileName has a extra double quote around it. — Luiz Alves
– Luiz Alves, Commented Jul 19, 2020 at 14:27

Alex Shchur · Accepted Answer · 2020-07-19 14:16:50Z

After reviewing your additional details, I think the underscores are added because of your regex, that captures also double quotes it seems.

Based on your details, response header content is:

Content-Disposition: attachment; filename="xmlFile.zip"

And then you extract it like this:

const fileName = response.headers["content-disposition"].match( /filename=(.*)/ )[1];

Try logging into console fileName. I think it would require stripping double quotes.

Make sure that in node you allow content disposition response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")

Collectives™ on Stack Overflow

Download zip file from nodejs with vuejs

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related