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

php javascript angularjs ajax fpdf

2022-08-30 14:02:47

我正在使用AngularJS，我正在尝试在php中生成PDF。这是我在控制器中所拥有的.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 <> stream x3Rðâ2Ð35W（çr QÐw3T04Ó30PISp êZ*[¤（hx¤æää+çå¤（j*dÔ7W endstream endobj 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-downloadapplication/pdf

响应如下所示（当我在Chrome中检查网络时）：

%PDF-1.3 3 0 obj <> endobj 4 0 obj <> stream x3Rðâ2Ð35W（çr QÐw3T04Ó30PISp êZ*[¤（hx¤æää+çå¤（j*dÔ7W endstream endobj 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

答案 1

更新

使用FileSaver.js的方法也不起作用，似乎没有办法仅通过JavaScript强制调用本机的另存为对话框，唯一的例外是IE的saveAs。检查 execCommand SaveAs 在 Firefox 中是否有效？execCommand

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

 };

该对象将在大多数现代浏览器中工作，但对IE的支持有限 < 10，检查 https://github.com/eligrey/FileSaver.js#supported-browsers polyfillsBlob

同时删除和标头，因为我们不希望浏览器本机处理下载过程Content-Disposition: attachmentContent-Type: application-download

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

答案 2

让我给你一件事。

通过AJAX，只有您无法下载任何文件。您需要首先使用ajax调用创建.zip文件，然后获得该文件路径，您必须使用任何命令打开该文件。

这里有一个适合我的例子：:)

$http.post('www.abc.com/zipcreate', {'id': id}).then(function (zipurl) {
                    $window.location = zipurl;
            });

当然，它有效。尝试一次。:)

编辑：

或者您可以使用

$window.location = 'abc.com/link';

在“abc.com/link”中：使用以下代码：

  header("Content-type: application/octet-stream");
  header("Content-Disposition: attachment; filename=".$name);
  header("Pragma: no-cache");
  header("Expires: 0");
  readfile($file);
  exit;

您将在下载列表中获得文件。