如何从 vuejs 下载在 laravel 中生成的 pdf？答案

【问题标题】：How to download pdf generated in laravel, from vuejs?如何从 vuejs 下载在 laravel 中生成的 pdf？
【发布时间】：2020-01-13 14:36:41
【问题描述】：

我在 laravel 中有以下函数用于生成 pdf

public function download_agreement(Request $request){
        try{
           /*  $items = DB::table("items")->get();
                    view()->share('items',$items); */
            if ($request->has('download')) {
            $pdf = PDF::loadView('pdf.agency.agreement');
            return $pdf->download('pdfview.pdf');
        }
        $pdf = PDF::loadView('pdf.agency.agreement');
        return view('pdfview');
        }
        catch(\Exception $error){
            Log::error('[RegistrantsController] error in send_agreement ' . $error);
            return response()->json(['code' => 403, 'message' => 'Something went wrong']);
        }
    }

然后我正在执行以下操作：

downloadAgreement() {
      console.log("DOWNLOAD");
      let sendData = {
        uuid: this.$route.params.uuid,
        email: "email@gmail.com",
        download: true
      };
     axios
    .post(config.routePrefix + "/agency/download_agreement", sendData)
    .then(response => {
      console.log(response);
      const url = window.URL.createObjectURL(new Blob([response.data]));
      console.log(url);
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "file.pdf");
      document.body.appendChild(link);
      link.click();
    })
    .catch(error => {
      console.log(error);
    });
}

我生成了 pdf 并设法下载了它。我遇到的问题是它向我显示了空白的pdf。在我的 .blade 文件中：

@extends('pdf.layout')
@section('style')
<style>
    .agreement-text {
        margin-left: 7%;
        margin-right: 7%;
    }
    .sign-line{
      align-self: center;
      width: 60%;
      border-bottom: 1px solid black;
    }
    .ql-align-justify{
        text-align: justify;
    }
    .ql-align-center{
        text-align: center;
    }
    .header-line{
        border: none;
        height: 3px;
        color: #a1d138 ;
        background-color: #a1d138 ;
    }
</style>
@stop
@section('content')
    <header>
        {{-- <img style="width: 30%;" src="{{ config('arm.arm_app.email_pdf_logo') }}"> --}}
        <hr class="header-line">
    </header>

    <div class="agreement-text">
        TEST TEST TEST TEST
    </div>


    <div class="img-div">
        {{-- <img class="img-center" src="{{$sign}}"> --}}
    </div>

    <div class="img-div">
        <hr class="sign-line">
        Nombre
    </div>
@stop

目前我没有发送任何数据，我只是想轻松生成带有文本的 pdf

【问题讨论】：

内部服务器错误总是伴随着特定的错误消息。在你的日志中找到它并弄清楚它说了什么。
我已经生成并下载了它，但它显示为空白。我已经编辑了我的问题

标签： vue.js laravel-5

【解决方案1】：

假设$pdf->download 已经返回正确的标题，最简单的解决方案是向用户显示指向该 URL 的链接，用户可以点击该链接。如果页面上可能有未保存的内容，请确保在新选项卡中打开它，例如一个表格。

您也可以使用 JS 打开一个弹出窗口。据我所知，所有浏览器都会显示保存提示，然后关闭选项卡。

【讨论】：

我已经生成并下载了它，但它显示为空白。我已经编辑了我的问题
我的意思是直接指向您的 download_agreement 页面的链接，但现在我看到这是一个发布请求，因此无法正常工作。如果您手动导航到使用 createObjectURL 生成的 URL（复制粘贴到地址栏）它有效吗？您是否通过用户交互触发了downloadAgreement() 函数？