Невозможно загрузить файл (pdf) из бэкэнда Laravel через Vue.js (сообщение Axios)

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, отправить PDF по электронной почте в CC и загрузить 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 в запросе, вам придется отправлять данные формы. Это довольноЛегко настроить объект данных формы, и быстрого Google на FormData должно быть достаточно.

Другой способ сделать что-то вроде этого.Пусть конечная точка вернет URL-адрес загрузки для вашего файла

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

, а на стороне клиента используйте window.location, чтобы установить местоположение браузера для этой конечной точки API, которая будет возвращать только файлы (в данном случае / api /скачать / {имя_файла}).После этого браузер загрузит любой файл, возвращенный из указанного вами местоположения (если вы правильно настроили заголовки).

Это будет означать, что вам придется реализовать маршрут / api / download / {fileName}, но этоэто то место, куда вы бы поместили что-то вроде этого.

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

Очевидно, что это просто простое объяснение, и его не нужно реализовывать точно так же, но оно помогает понять идею.

Теперь вам нужно убедиться, что вы не помещаете какие-либо конфиденциальные файлы в хранилище / и не настроили некоторые разрешения.

Answer 2

Axios используется для запросов XHR.Как правило, загрузка файлов осуществляется с помощью обычных запросов GET, но здесь у вас есть пост-запрос XHR для загрузки файлов.

Чтобы загружать файлы через AJAX, некоторые люди используют библиотеки, а некоторые создают ссылку блоба из ответа, добавьте его в DOM и затем нажмите на ссылку.

Вы можете отослать эту суть и SO post для дальнейших деталей.

Лично я предпочитаю простые не XHR получать запросы на загрузку файлов.