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

Question

我正在使用AngularJS,我正在尝试在php中生成PDF.这就是我在controller.js中的内容:

$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 <> streamx3Rðâ2Ð35W(çrQÐw3T04Ó30PISpêZ*[¤(hx¤æää+çå¤(j*dÔ7Wstndstreamendobj 1 0 obj <endobj 5 0 obj <endobj 2 0 obj <</ProcSet [/ PDF/Text/ImageB/ImageC/ImageI]/Font <</F1 5 0 R>/XObject << >> endobj 6 0 obj <</Producer(FPDF 1.7)/ CreationDate(D:20150611094522 )> endobj 7 0 obj << /类型/目录/页1 0 R> endobj xref 0 8 0000000000 65535 f 0000000228 00000 n 0000000416 00000 n 0000000009 00000 n 0000000087 00000 n 0000000315 00000 n 0000000520 00000 n 0000000595 00000 n预告片<< /大小8 /根7 0 R /信息6 0 R> 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);

该文件在本地保存,但下载不起作用.它没有得到我保存pdf的对话框.我究竟做错了什么？

更新2

现在我已经试图改变application-download在application/pdf.他在本地保存文件,但我没有得到下载对话框.

响应如下(当我在Chrome中检查网络时):

%PDF-1.3 3 0 obj <> endobj 4 0 obj <> streamx3Rðâ2Ð35W(çrQÐw3T04Ó30PISpêZ*[¤(hx¤æää+çå¤(j*dÔ7Wstndstreamendobj 1 0 obj <endobj 5 0 obj <endobj 2 0 obj <</ProcSet [/ PDF/Text/ImageB/ImageC/ImageI]/Font <</F1 5 0 R>/XObject << >> endobj 6 0 obj <</Producer(FPDF 1.7)/ CreationDate(D:20150617090832 )> endobj 7 0 obj << /类型/目录/页1 0 R> endobj xref 0 8 0000000000 65535 f 0000000228 00000 n 0000000416 00000 n 0000000009 00000 n 0000000087 00000 n 0000000315 00000 n 0000000520 00000 n 0000000595 00000 n预告片<< /大小8 /根7 0 R /信息6 0 R> startxref 644 %% EOF

Answer 1

UPDATE

使用FileSaver.js的方法也不起作用,似乎无法单独通过JavaScript强制调用本机"另存为"对话框,只有例外是execCommandIE 的saveAs .检查execCommand SaveAs在Firefox中是否有效？

在项目中包含FileSaver.js作为依赖项

更改downloadPDF功能如下

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

 };

该Blob对象适用于大多数现代浏览器,但对IE <10的支持有限,请检查https://github.com/eligrey/FileSaver.js#supported-browsers for polyfills

还删除Content-Disposition: attachment和Content-Type: application-download标题,因为我们不希望浏览器本地处理下载过程

这是一个工作演示http://plnkr.co/edit/9r1tehQ94t5vkqZfZuQC?p=preview,它显示了对PDF的GET请求

Answer 2

根据文档，您可以将第二个参数设置为D：

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

如果您想使用保存的文件自行处理所有详细信息，这就是我向浏览器呈现 PDF 以从 PHP 下载的方式：

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('file.pdf'));
header('Content-Transfer-Encoding: binary');
header('Content-Disposition: attachment; filename="file.pdf"');
$handle = fopen('file.pdf', 'rb');
fpassthru($handle);
fclose($handle);

更新：

请验证 PDF 文件是否确实正在制作。Web 服务器进程是否具有对该路径的写访问权限？FPDF 是否正确包含在内？我在测试虚拟机上做了这个，它提供了一个1.pdf可供下载的文件，该文件打开并包含“Hello World！”：

<?php

require('/var/www/html/fpdf17/fpdf.php');

$_POST = array('fid' => '1');

$pdf = new FPDF();

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

$filename = '/tmp/' . $_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="' . basename($filename) . '"');

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

unlink($filename);

?>