首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery打印iframe在本地主机上工作,但在服务器中不起作用。

jQuery打印iframe在本地主机上工作,但在服务器中不起作用。
EN

Stack Overflow用户
提问于 2016-01-25 10:39:28
回答 2查看 1.4K关注 0票数 0

下面的代码在我的本地environment..however中运行得很好,相同的在线代码不起作用。我没有收到任何错误,iFrame只是没有像预期的那样弹出。

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

代码语言:javascript
代码运行次数:0
运行
复制
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:

代码语言:javascript
代码运行次数:0
运行
复制
http://mywebsite.com/public/files/somefile.pdf 

它不会打开铬预览对话框。但是,如果我删除http://mywebsite.com,只发送public/files/somefile.pdf -类似于一个相对路径,则将打开铬预览对话框,但它将显示我的404页。

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

代码语言:javascript
代码运行次数:0
运行
复制
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路径发送到铬控制台的网络选项卡的iFrame后,pdf将作为响应头检索:

代码语言:javascript
代码运行次数:0
运行
复制
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:我刚刚尝试从页面检索PDF,但没有成功,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
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中使用

代码语言:javascript
代码运行次数:0
运行
复制
json.pdf = json.pdf.replace('http://mywebsite.com/', '');
json.pdf = base_url + 'backend/files/display_pdf/' + json.pdf;

最终的url类似于:http://mywebsite/backend/files/display_pdf/public/files/somefile.pdf

如果我在浏览器中输入该链接,则在iframe中输入works..but,它将继续不打开来自铬的打印预览。

编辑3:我还运行了几个测试,这个问题在iframe上继续存在,因为它以其他方式工作。例如,下面的代码打开一个新的选项卡,并自动打开打印预览对话框的铬,没有任何问题。

代码语言:javascript
代码运行次数:0
运行
复制
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()}

但我不想开新的账单。因此,我尝试在我所在的选项卡中打开一个选项卡,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
var printWindow = window.open(json.pathToPdf, "printWindow", "scrollbars=yes");
printWindow.focus();
printWindow.print();

而且,它会在我所在的选项卡中打开一个小选项卡,但是它不会聚焦铬打印预览对话框,如果我在全屏上工作,它会关闭这个选项卡。

编辑4:问题确实是因为PDF。如果我将代码更改为:

代码语言:javascript
代码运行次数:0
运行
复制
$('body').append('<iframe class="hidden" id="iFramePdf" src="' + json.pdf + '"></iframe>');

代码语言:javascript
代码运行次数:0
运行
复制
$('body').append('<iframe class="hidden" id="iFramePdf" src="http://mywebsite.com/public/images/someimage.png"></iframe>');

代码语言:javascript
代码运行次数:0
运行
复制
$('body').append('<iframe class="hidden" id="iFramePdf" src="http://mywebsite.com/somepage.php"></iframe>');

它的工作没有任何问题。

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

代码语言:javascript
代码运行次数:0
运行
复制
$('body').append('<iframe class="hidden" id="iFramePdf" src="http://mywebsite.com/public/files/somepdf.pdf"></iframe>');
EN

回答 2

Stack Overflow用户

发布于 2016-01-27 10:53:05

经过我所有的尝试,这看起来真的是一个没人知道的bug。它在本地主机上工作,但在服务器上不工作。唯一的问题是PDF文件,因为图像和页面可以正常工作。

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

不管怎么说,如果有人知道任何解决方案,或者想让我尝试任何事情,我会很乐意这样做的。

票数 1
EN

Stack Overflow用户

发布于 2016-06-06 12:24:55

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

1)调用js函数的图标代码:

代码语言:javascript
代码运行次数:0
运行
复制
<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:

代码语言:javascript
代码运行次数:0
运行
复制
<div id="view-report-holder"></div>

3)输出pdf报告的JS功能:

代码语言:javascript
代码运行次数:0
运行
复制
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的链接和功能:(打印功能不需要)

代码语言:javascript
代码运行次数:0
运行
复制
<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;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34990535

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档