javascript - Getting filename from React fetch call - Stack Overflow

admin管理员组

文章数量:1353995

I am doing a fetch method in React and It returns .pdf file that also is named and now I would like to get that filename.

function downloadPdf() {
    fetch(BASE_URL + `/example/example/pdf/${exampleId}`)
      .then(r => r.blob())
      .then(showFile);
}

function showFile(blob, filename) {...}

How can I get the filename and call my function showFile with the filename?

I am doing a fetch method in React and It returns .pdf file that also is named and now I would like to get that filename.

function downloadPdf() {
    fetch(BASE_URL + `/example/example/pdf/${exampleId}`)
      .then(r => r.blob())
      .then(showFile);
}

function showFile(blob, filename) {...}

How can I get the filename and call my function showFile with the filename?

• javascript
• reactjs
• file
• fetch-api
• filenames

Share Improve this question Follow edited Jul 29, 2023 at 11:50 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 24, 2020 at 15:01 RichardRichard 1,11744 gold badges2121 silver badges6161 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I ended up using this instead.

fetch(BASE_URL + `/example/example/pdf/${exampleId}`)
  .then(response => {
      const filename =  response.headers.get('Content-Disposition').split('filename=')[1];
      response.blob().then(blob => {
        let url = window.URL.createObjectURL(blob);
        let a = document.createElement('a');
        a.href = url;
        a.download = filename;
        a.click();
      });
    });

The main problem I had here is that I forgot to expose Content-Disposition in my backend API which is why the React couldn't read the Content-Disposition and that gave me a lot of headache.

That blob should contain the file name also. You can get the name like this:

function downloadPdf() {
    fetch(BASE_URL + `/example/example/pdf/${exampleId}`)
      .then(r => r.blob())
      .then(showFile(r));
}

function showFile(fileReceived) {
  let filename = fileReceived[0].filename;
  // other operations
}

本文标签： javascriptGetting filename from React fetch callStack Overflow