是否可以通过 javascript 呈现 PDF (fPDF)？答案

【问题标题】：Is it possible to render PDF (fPDF) via a javascript?是否可以通过 javascript 呈现 PDF (fPDF)？
【发布时间】：2011-01-06 21:41:01
【问题描述】：

所以，我通过 jQuery 将一些值传递给服务器，这会生成 PDF 乱码。它是这样的：

$.post('/admin/printBatch',
data, // Some vars and such
function(data){
    if(data) {

        var batch =  window.open('','Batch Print','width=600,height=600,location=_newtab');
        var html = data; // Perhaps some header info here?!
        batch.document.open();
        batch.document.write(html);
        batch.document.close();

        $( this ).dialog( "close" ); // jQuery UI
    } else {
        alert("Something went wrong, dawg.");
    }
    return false;
});

输出文件大致如下：

$pdf->AddPage(null, null, 'A PDF Page');
//....
$pdf->Output('', 'I'); // 'I' sends the file inline to the browser (http://fpdf.org/en/doc/output.htm)

渲染到浏览器窗口的内容：

%PDF-1.3 3 0 obj <> endobj 4 0 obj <> stream ...

我错过了一些重要的东西，我只知道......想法？

谢谢各位。

【问题讨论】：

你好LaRosee，你有解决上述问题的办法吗？

标签： php jquery pdf fpdf

【解决方案1】：

从外观上看，PDF 格式合理。因此，我怀疑您只需要在使用 header 函数通过 PHP 输出 PDF 时设置适当的内容标题：

header('Content-type: application/pdf');

注意：这个必须是 PHP 的第一个输出 - 如果前面有 HTML、空格等，它将不起作用。

在理想情况下，您还可以通过...设置内容长度等

header('Content-Length: '.filesize($pathToYourPDF));

...或...

header('Content-Length: '.strlen($pdfData));

...如果您以编程方式生成 PDF。

更新

为了澄清，我怀疑您需要更改您的 window.open 以直接从 PHP 提供的 URL 读取以上内容，以上内容才能正常工作。（不太清楚为什么你不只是首先这样做，但我想这是有充分理由的。）

【讨论】：

如果他将它存储在一个字符串中，这真的有效吗？我想所有的元数据都丢失了......
@Blindy - 老实说，我有点假设他需要更改 window.open 以直接指向执行上述操作的 PHP，因为我不相信这样的事情无法通过 JavaScript 设置。嗯...应该真的更新我的回答来这么说。 :-)
大家好。因此，FPDF 类在转储缓冲区之前设置标题： if(php_sapi_name()!='cli') { //We send to a browser header('Content-Type: application/pdf'); if(headers_sent()) $this->Error('一些数据已经输出，不能发送PDF文件'); header('Content-Length: '.strlen($this->buffer)); header('Content-Disposition: inline; filename="'.$name.'"'); header('Cache-Control: private, max-age=0, must-revalidate'); header('Pragma: public'); ini_set('zlib.output_compression','0'); } echo $this->buffer;
@Middaparka - 我没有将 window.open 指向 URL 的原因是因为我正在生成 PDF 并通过 jQuery ajax 回调将其传回......这可能是我“将不得不放弃。我在各种输入上使用 jQuery 到 .foreach()，然后使用这些值生成 PDF 并（理论上）将生成的缓冲区传递回浏览器，然后通过 JS 打开一个新窗口.
我要归功于 Middaparka，因为我最终放弃了从 ajax 调用传递 PDF 缓冲区 back 的概念，而是更直接地调用“PHP 提供的 URL。”

【解决方案2】：

我宁愿为弹出窗口设置URL，指向输出PDF的php脚本。

如果您绝对必须这样做，data-uri 可能会有所帮助：

var batch =  window.open(
                    'data:application/pdf,'+encodeURIComponent(data),
                    'Batch Print',
                    'width=600,height=600,location=_newtab'
             );

但是我没有测试过，即使在普通浏览器下也可以，在IE下肯定会失败。

【讨论】：

实际上它可以在 IE 中工作，但是任何超过几 KB 的东西都会非常慢。我曾经将 200kb 的图像作为数据粘贴到 chrome 中，显示它花了大约半分钟......这是因为他们分配地址的方式，因为他们不希望它增长太多。
看来URI编码不够，数据应该是base64编码的，可以和'data:application/pdf;base64,'+data一起使用；

【解决方案3】：

我已经为我的应用程序测试了这个，我的结论是你必须使用 iframe（其中 show_pdf 返回 "$pdf->Output('', 'I');"）：

$.ajax({
 url: "http://www.somesite.com/documents/generatePDF",
 success: function(){
  $('#theDocument').html('<iframe id="some_id" class="some_pdf" style="display:none" src="http://www.somesite.com/documents/show_pdf" width="100%" height="450" scrollbar="yes" marginwidth="0" marginheight="0" hspace="0" align="middle" frameborder="0" scrolling="yes" style="width:100%; border:0;  height:450px; overflow:auto;"></iframe>');
 }
});
$('#dialog-document').dialog('open');

【讨论】：

【解决方案4】：

这对我有用：改变

$pdf->Output('', 'I');

为

$return = $pdf->Output('name.pdf', 'S');
$return = base64_encode();
$return = 'data:application/pdf;base64,'.$return;
echo json_encode($return);

现在，您应该在您的 javascript 文件中获取返回值并打开一个新窗口

success: function( data ) {
    var pdf = JSON.parse(data);
    window.open(pdf);
}

它将在您的浏览器上打开一个带有 pdf 的新标签。

【讨论】：