使用ajax请求在浏览器中下载

Question

$scope.downloadPDF = function(){
    $http.post('/download-pdf', { fid: $routeParams.fid })
        .success(function(data, status, headers, config){
            console.log("success");
        })
        .error(function(data, status, headers, config){
            console.log("error");
        });
};

在我的php文件中，我有以下内容来创建一个带有FPDF库的PDF：

function download_pdf()
{
    $id = $_POST['fid'];

    $pdf = new FPDF();

    $pdf->AddPage();
    $pdf->SetFont('Arial','B',16);
    $pdf->Cell(40,10,'Hello World!');

    header('Content-Type: application/pdf');
    header('Content-Disposition: attachment; filename=' . $id . '.pdf');

    $pdf->Output('Order123.pdf', 'D');
}

但是请求是响应这个，而不是打开一个保存对话框来保存我的PDF。

%PDF-1.3 3 0 obj<>endobj 4 0 obj<>stream x 3 R@2π35 W(çR qπw 3 t04多30 pispéz*[(hx·ääää+çó)·(j*dé7 w endstream endobj 1 0 obj set[="" df="" ext="" mageb="" magec="" magei]="" ont<="" 1="" r=""> /xobject<>endobj 6 0 xref 0 8 000 0000000 65535 f 00000000228 00000 n 0000000000416 00000 n00000 n拖车<startxref 644%%EOF

我已经使用了PHPExcel库，它起到了作用：

$objWriter = PHPExcel_IOFactory::createWriter($ea, 'Excel2007');

// We'll be outputting an excel file
header('Content-type: application/vnd.ms-excel');

// It will be called Submission on [date_now].xls
header('Content-Disposition: attachment; filename="' . $filename . '.xls' . '"');

// Write file to the browser
$objWriter->save('php://output');

现在我怎样才能使这工作为我的PDF？

更新：

$pdf = new FPDF();

$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(40,10,'Hello World!');

$filename = DXS_VKGROUP_PLUGIN_LIB_DIR . 'uploads/' . $_POST['fid'] . '.pdf';

$pdf->Output($filename, 'F'); // Save file locally

header('Pragma: public');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Content-Type: application-download');
header('Content-Length: ' . filesize($filename));
header('Content-Transfer-Encoding: binary');
header('Content-Disposition: attachment; filename="' . $filename . '"');

$handle = fopen($filename, 'rb');
fpassthru($handle);
fclose($handle);

Answer 1

更新

使用filesaver.js的方法也不起作用，似乎没有办法单独通过JavaScript强制调用原生Save As对话框，只有IE的saveAsexecCommand例外。检查execCommand SaveAs在Firefox中工作吗？

<罢工> 包括 js作为项目中的依赖项

 $scope.downloadPDF = function() {
    $http.post('/download-pdf', {
        fid: $routeParams.fid
      }, {
        responseType: 'arraybuffer'
      })
      .success(function(data, status, headers, config) {
        // Convert response data to Blob
        var file = new Blob([data], {
          type: 'application/pdf'
        });
        // Call the File Saver method to save the above Blob,this will show Save As dialog
        saveAs(file, "test.pdf");
      })
      .error(function(data, status, headers, config) {
        console.log("error");
      });

 };