无法通过 Vue.js(Axios 帖子)从 Laravel 后端下载文件(pdf) [英] Unable to download a file (pdf) from Laravel backend via Vue.js (Axios post)

问题描述

我在 Vue 中有一个多步骤表单，一旦我收集了所有信息，我就会将结果发布到 Laravel 控制器.这是站点的经过身份验证的区域.我正在使用护照.所以基本上我有一个 Vue SPA，它是在 Laravel 5.7 框架内构建的网站的管理区域.

I have a multi-step form in Vue, I am posting the results once I collect all of the information, to a Laravel controller. This is an authenticated area of the site. I am using Passport. So essentially I have a Vue SPA that is the admin area of a website built within the Laravel 5.7 framework.

Vue file:
axios.post('/api/quotes/finalize', this.wizardModel)
                        .then(response => {
                            if (response.data.success) {
                                //
                            }
                        })
                        .catch(err => {
                            if (err.response.status == 401) {
                                window.location.href = '/login';
                            }
                            swal.showValidationError(
                                `Request failed: ${error}`
                            )

                        })

控制器获取数据并生成 pdf.所有这些都在起作用.然后它需要查看三个操作 - 通过电子邮件发送 PDF、通过 CC 发送 PDF 以及下载 PDF.

The controller gets data and makes a pdf. All of that is working. It then has three actions to look at - email the PDF, email the PDF with CC, and download the PDF.

    public function finalizeQuote(Request $request)
{
        $data = $request->all();
        $data['phone'] = $this->formatTelephone($data['phone']);

        $dateStamp = date('Ymdhis', strtotime('now'));
        $fileName = 'quote-' . $dateStamp . '.pdf';
        $html = View::make('quotes.quote', compact('data'))->render();

        $conv = new Converter();
        $conv->addPage($html)
            ->save('storage/' . $fileName);

        if ($data['actions']['emailPDF']) {
                $message = (new Proposal('storage/' . $fileName))
                                ->onConnection('redis')
                                ->onQueue('emails');

                if ($data['actions']['carbonCopy']) {
                    Mail::to($data['emailAddress'])
                        ->cc(Auth::user()->email)
                        ->queue($message);
                } else {
                    Mail::to($data['emailAddress'])->queue($message);
                }

            }

            if ($data['actions']['downloadPDF']) {
                return response()->download(public_path('storage/' . $fileName));
            }
}

所以在开发工具中，我在响应中看到了 pdf 文件.浏览器中不会发生下载.我确定我只是在这里遗漏了一些基本的东西.

So in dev tools I see the pdf file in the response. No download occurs in the browser. I am sure I am just missing something fundamental here.

推荐答案

Axios 用于 XHR 请求.通常，下载文件是通过普通的 GET 请求完成的，但这里您有一个 XHR 发布请求来下载文件.

Axios is used for XHR requests. Typically, downloading files is done through normal GET requests but here you have an XHR post request to download files.

为了通过 AJAX 下载文件，有些人使用库，有些人创建来自响应的 blob 链接，将其附加到 DOM，然后触发点击链接.

To download files over AJAX, some folks use libraries and some create a blob link from the response, append it to DOM and then, trigger a click on the link.

您可以参考这个要点和SO post 了解更多详情.

You can refer this gist and SO post for further details.

就我个人而言，我更喜欢简单的非 XHR 获取文件下载请求.

Personally, I prefer simple non-XHR get requests for file downloads.

这篇关于无法通过 Vue.js(Axios 帖子)从 Laravel 后端下载文件(pdf)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！