vue.js - 下载 pdf vue

Question

当我在 PostMan 上调用此功能时，它会下载 pdf，但是当我从页面调用时，它不会下载但请求到达。我要下载

,generateFarmerPDF:function (id) {
            this.farmerId = id
          var data = new FormData()
          data.append('function','generateFarmerPDF')
            data.append('farmerId',this.farmerId )
          axios.post(this.url,data)
              .then( function (response ) {
          }.bind(this)).catch(function (error) {

          })

        }

这是api代码

if ($function == "generateFarmerPDF") {
    $farmerId = $_POST['farmerId'];

    $result = DB::instance()->executeSQL("SELECT * FROM `milk_production`  WHERE `farmerId` ='$farmerId'");
    $header = DB::instance()->executeSQL("SELECT `COLUMN_NAME` 
FROM `INFORMATION_SCHEMA`.`COLUMNS` 
WHERE `TABLE_SCHEMA`='blog_samples' 
AND `TABLE_NAME`='milk_production'");


    $pdf = new FPDF();
    $pdf->AddPage();
    $pdf->SetFont('Arial', 'B', 5);
    foreach ($header as $heading) {
        foreach ($heading as $column_heading)
            $pdf->Cell(20, 6, $column_heading, 1);
    }
    foreach ($result as $row) {
        $pdf->SetFont('Arial', '', 5);
        $pdf->Ln();
        foreach ($row as $column)
            $pdf->Cell(20, 6, $column, 1);
    }
    $pdf->Output();
}

我是这样称呼它的

<button v-on:click="generateFarmerPDF(milkvolume.farmerId)">Report</button></td>

Answer 1

例如，您可以使用它:

axios('/urltopdfgeneration', {
    method: 'GET',
    responseType: 'blob'
})
.then(response => {
    //Create a Blob from the PDF Stream
    const file = new Blob(
    [response.data], 
    {type: 'application/pdf'});
    //Build a URL from the file
    const fileURL = URL.createObjectURL(file);
    //Open the URL on new Window
    window.open(fileURL);
})
.catch(error => {
    console.log(error);
});

也许弹出窗口阻止程序会因为 window.open 而捕获它，但它可以很好地以这种方式使用 axios 下载 pdf。