Question

我有一个使用Laravel创建的Restful 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代码模仿文件下载，如下所示：

Reference

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

在React中下载文件

1 个答案: