下载文件在反应

Question

我使用Laravel创建了一个Restful API，该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);
    }

它在邮递员中工作，也在浏览器中工作，直接下载文件，但使用react。js，它不工作，这是我在react中的代码：

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>

id已更正，我由此确定，我的问题是单击此按钮时如何下载文件。。丹。。。

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

或者使用文件保护程序包，如果你不介意一个额外的依赖。

文件保存器