Question

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

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。

    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文件。浏览器中没有下载。我确定我只是在这里缺少一些基本的东西。

Answer 1

仅Ajax请求无法调用下载。您可能有一个隐藏的表单，可以将数据发布到api端点，这可能是最快的解决方案。

Axios具有轻松完成此操作的内置方法

axios({
    method: 'post',
    url: '/api/quotes/finalize',
    data: wizardModelFormData,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
    })

您不必发送json，而必须发送表单数据。设置表单数据对象非常容易，并且在FormData上快速浏览一下就可以了。

另一种方法是执行类似的操作。让端点返回文件的下载URL，

   if ($data['actions']['downloadPDF']) {
        return response()->json(["download_url" => "/api/download/" . $fileName]);
    }

，然后在客户端使用window.location将浏览器位置设置为此仅返回文件的api端点（在本例中为/ api / download / {fileName}）。然后，浏览器将下载从您设置的位置返回的所有文件（如果正确设置了标题）。

这意味着您将必须实现/ api / download / {fileName}路由，但这就是您要放置类似内容的地方。

return response()->download(public_path('storage/' . $fileName));

很显然，这只是一个简单的解释，不需要完全以相同的方式实现，但是可以理解。

现在，您要确保不要在存储中放置任何敏感文件，并且要进行一些权限设置。

Answer 2

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

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

您可以参考 this gist和SO post以获取更多详细信息。

我个人更喜欢简单的非XHR获取文件下载请求。

无法通过Vue.js从Laravel后端下载文件（pdf）（Axios帖子）

2 个答案: