小编典典

在反应中下载文件

reactjs

我有一个使用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已更正,我确保从这开始,我的问题是单击此按钮时如何下载文件。


阅读 245

收藏
2020-07-22

共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

2020-07-22