Получение имени файла из вызова React

Question

Я выполняю fetch метод в React, и он возвращает .pdf файл, который также назван, и теперь я хотел бы получить это имя файла.

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

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

Как я могу получить имя файла и вызвать мою функцию showFile с именем файла?

Answer 1

Этот BLOB-объект должен также содержать имя файла. Вы можете получить имя как это:

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
}

Answer 2

В итоге я воспользовался этим.

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();
      });
    });

Основная проблема, с которой я столкнулся, заключается в том, что я забыл выставить Content-Disposition в своем бэкэнд-API, поэтому React не может прочитать Content-Disposition и это вызвало у меня сильную головную боль.