Download pdf vue

Question

when I call this fucntion on PostMan it does download the pdf but when I call in from the page it does not download but request reaches. I want it to download

,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) {

          })

        }

here is the api code

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();
}

This is how I call it

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

Answer 1

For example you could use it:

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);
});

Maybe a popup blocker catch it because the window.open but it is works well in this way to download a pdf using axios.