jQuery print iframe pdf 适用于本地主机，但不适用于服务器

jQuery print iframe pdf works on localhost but not in server

本文关键字：适用于 不适用 服务器 主机 print iframe pdf jQuery      更新时间：2023-09-26

下面的代码在我的本地环境中完美运行。但是，相同的在线代码不起作用。我没有收到任何错误，iFrame 只是没有按预期弹出。

src属性总是按预期在 iframe 中更改...

if($('#iFramePdf').length > 0)
    $('#iFramePdf').attr('src', json.pdf);
else
    $('body').append('<iframe class="hidden" id="iFramePdf" src="' + json.pdf + '"></iframe>');
// enough time for the src being changed
setTimeout(function()
{
    $('#iFramePdf').get(0).focus();
    $('#iFramePdf').get(0).contentWindow.print();
}, 1000);

可能出了什么问题？

编辑1：这似乎可能是由于content-type标题引起的？json.pdf 具有如下所示的绝对 URL：

http://mywebsite.com/public/files/somefile.pdf

并且它不会打开镶边预览对话框。但是，如果我删除http://mywebsite.com并仅发送public/files/somefile.pdf - 就像相对路径一样，Chrome 预览对话框会打开，但它会显示我的 404 页面。

检索 PDF 的函数ajax_get具有以下响应标头：

Cache-Control:no-cache, no-store, must-revalidate
Connection:keep-alive
Content-Encoding:gzip
Content-Length:166
Content-Type:text/html; charset=UTF-8
Date:Tue, 26 Jan 2016 09:24:42 GMT
Expires:0
Pragma:no-cache
Server:nginx
Vary:User-Agent,Accept-Encoding
X-Powered-By:PHP/5.6.17

并检索以下 json： {"status":1,"msg":"Added successfully", "pdf":"http:'/'/mywebsite.com'/public'/files'/somefile.pdf"}

收到 json 并将 pdf 的路径发送到 chrome 控制台的网络选项卡中的 iFrame 后，pdf 将作为响应标头检索：

Accept-Ranges:bytes
Cache-Control:no-cache, no-store, must-revalidate
Connection:keep-alive
Content-Length:52611
Content-Type:application/pdf
Date:Tue, 26 Jan 2016 09:24:42 GMT
Expires:0
Last-Modified:Tue, 26 Jan 2016 09:24:42 GMT
Pragma:no-cache
Server:nginx
Vary:User-Agent

编辑2：我只是尝试从PHP页面检索PDF没有成功，如下所示：

function display_pdf($url)
{
   header('Content-type: application/pdf');
   header('Content-Disposition: inline; filename="testing.pdf"');
   header('Content-Transfer-Encoding: binary');
   header('Accept-Ranges: bytes');
   echo file_get_contents(base_url() . $url);
}

在发送到iFramePdf之前在javascript中：

json.pdf = json.pdf.replace('http://mywebsite.com/', '');
json.pdf = base_url + 'backend/files/display_pdf/' + json.pdf;

最终网址如下所示：http://mywebsite/backend/files/display_pdf/public/files/somefile.pdf

如果我在浏览器中输入该链接，它可以工作..但在iframe中，它仍然无法从Chrome打开打印预览。

编辑3：我又运行了一些测试，问题在iframe上仍然存在，因为它以其他方式工作。例如，下面的代码打开一个新选项卡并自动打开 chrome 的打印预览对话框，没有任何问题。

var win=window.open('about:blank');
win.document.write('<html><head></head><body>'); 
win.document.write('<iframe frameBorder="0" align="center" src="' + json.pdf + '" onload="test()" style="width: 100%; height: 100%"></iframe>'); 
win.document.write('<scr'+'ipt>function test(){window.focus();window.contentWindow.print()}</sc'+'ript></body></html>'); 
win.document.close(); 
if (window.focus) {win.focus()}

但我不想打开一个新标签。所以我尝试在我所在的选项卡中打开一个选项卡，如下所示：

var printWindow = window.open(json.pathToPdf, "printWindow", "scrollbars=yes");
printWindow.focus();
printWindow.print();

并且可以工作，它会在我所在的选项卡中打开一个小选项卡，但是它不会聚焦 chrome 打印预览对话框，如果我在全屏模式下工作，它会将其关闭。

编辑4：问题实际上是因为PDF。如果我将代码从：

$('body').append('<iframe class="hidden" id="iFramePdf" src="' + json.pdf + '"></iframe>');

自

$('body').append('<iframe class="hidden" id="iFramePdf" src="http://mywebsite.com/public/images/someimage.png"></iframe>');

或

$('body').append('<iframe class="hidden" id="iFramePdf" src="http://mywebsite.com/somepage.php"></iframe>');

它可以毫无问题地工作。

如果我将PDF直接设置为src打印预览对话框不会打开，但PDF会加载到iframe中。

$('body').append('<iframe class="hidden" id="iFramePdf" src="http://mywebsite.com/public/files/somepdf.pdf"></iframe>');

经过我所有的尝试，这似乎真的是一个没有人知道的错误。它适用于本地主机，但不适用于服务器。唯一的问题是PDF文件，因为图像和页面工作正常。

我最终可能会从生成的 PDF 文件创建图像，这不是一个好的解决方案，因为我可以有多个 PDF 页面。

无论如何，如果有人知道任何解决方案或希望我尝试任何事情，我很乐意这样做。

当用户

单击表格中的打印图标时打印pdf的工作代码。

1）调用js函数的图标代码： 

<a href="javascript:printReport('<?= $userReport->pdf_file_name ?>')"><i class="btn-icon-only icon-large icon-print" title="Print Report"> </i></a>

2）一个div元素，用作占位符来显示和打印pdf： 

<div id="view-report-holder"></div>

3） JS功能打印PDF报告： 

function printReport(pdfFileName)
{
  $('#view-report-holder').hide();
  $('#view-report-holder').html('');
  $('<iframe>', {
    src: '<?= $uploadDir['baseurl']."/pdf_reports/" ?>' + pdfFileName,
    frameborder: 0,
    id: 'view-report',
    scrolling: 'no'
  }).appendTo('#view-report-holder');
  var printTag = document.getElementById('view-report');
  printTag.contentWindow.print();
  return false;
}

在表格下显示pdf的链接和功能：（打印功能不需要，顺便说一句）

<a href="javascript:viewReport('<?= $userReport->pdf_file_name ?>')"><i class="btn-icon-only icon-large icon-eye-open" title="View Report"> </i></a>
...
function viewReport(pdfFileName)
{
  $('#view-report-holder').show();
  $('#view-report-holder').html('');
  $('<iframe>', {
    src: '<?= $uploadDir['baseurl']."/pdf_reports/" ?>' + pdfFileName,
    frameborder: 0,
    scrolling: 'no'
  }).appendTo('#view-report-holder');
  $('html, body').animate({
    scrollTop: $("#view-report-holder").offset().top
  });
  return false;
}
相关文章：