如何通过reactjs中的javascript下载文件

Question

I have a link /api/ticket/1/download to my server and if I copy paste it into the browser, it will start a download of my file with it's filename extension and everything set up already.

How can I do it in javascript? With thymeleaf i was just using <a href="myLink"> and it worked like if I paste it in the browser. But due to react-router a href just goes to another page. But if I use await fetch like this:

let url1 = '/api/ticket/' + fileId + '/download';
        const response = await fetch(url1);
        const blob = response.blob();
        const url = window.URL.createObjectURL(new Blob([blob]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `file.jpg`);
        document.body.appendChild(link);
        link.click();

i can transfer response into blob, but then i miss the files name and extension.

Answer 1

The only way to solve this that i found is: send file name and extension in a response header and than parse them manualy. like: in spring:

myControllerMethod( HttpServletResponse response){
...
 response.setContentType(att.getType());
 response.setHeader("Content-Disposition", "attachment; filename=\"" + myFileName + "\"");
}

in react:

const headers = response.headers;
const file = headers.get("Content-Disposition");

and then parse manully this 'file' to get filenamel;

Answer 2

Try in this way, it may help you:

fetch('http://localhost:8080/employees/download')
            .then(response => {
                response.blob().then(blob => {
                    let url = window.URL.createObjectURL(blob);
                    let a = document.createElement('a');
                    a.href = url;
                    a.download = 'employees.json';
                    a.click();
                });

For more reference you can go through This link