скачать файл в реакции

Question

У меня есть Restful API, который я создал с помощью Laravel, этот API выглядит так:

http://127.0.0.1:8000/api/file/pdf/{id}

, и это мой код для загрузки:

public function pdfDownload($id){
       $pdf = Cv::findOrfail($id);
       return Storage::download('public/pdf/'.$pdf->pdf);
    }

он работает в почтальоне,а также в браузере, он напрямую загружает файл, но с реагировать на него.js, это не работает, этот мой код реагирует:

pdfDownload = (id) => {
        fetch(' http://127.0.0.1:8000/api/file/pdf/' + id, {
            method: 'get',
            headers: {
                Accept: 'application/octet-stream',
                'Content-Type': 'application/octet-stream'
            }
        }).then((res) => res.json());
    };

, и я вызываю эту функцию в кнопке следующим образом:

<Button color="primary" onClick={() => this.pdfDownload(data.id)}>
                                            Download
                                        </Button>

идентификатор исправлен, я уверен в этом, мой вопрос, как я могу скачать файл, когда нажимаю эту кнопку .. Thans ...

Answer 1

Вызовы XHR не могут инициировать загрузку файла, как это делает браузер.Вам нужно будет имитировать загрузку файла, используя код javascript самостоятельно, используя что-то вроде ниже:

Ссылка

const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf');
document.body.appendChild(link);
link.click();

Или используйте пакет File Saver, если вы нене возражаю против дополнительной зависимости.

FileSaver Npm