简体   繁体   English

在新标签页中打印内容将打印空白页

[英]printing contents in a new tab prints a blank page

I am trying to print the contents of a div to a new tab, however, it print a blank page only for the first time. 我正在尝试将div的内容打印到新选项卡,但是,它仅是第一次打印空白页。 When i manually print the page, it works fine. 当我手动打印页面时,它工作正常。 I am loading 2 tables wrapped in a div. 我正在加载2表包装在一个div中。

HTML structure: HTML结构:

<div class="receipt_bg" id="print_receipt">
  <div id="div1">
    table1
  </div>
  <div id="div2">
    table2
  </div>
</div>
<button type="button" id="print_btn">Print</button>

Javascript: Javascript:

$('#print_btn').click(printClick);

function printClick(receipt_bg) {
  var DocumentContainer = $('.receipt_bg').html();
  var WindowObject = window.open("PrintWindow","_blank");
  WindowObject.document.writeln('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">'+ '<html><head><title>test print receipt</title>    <link href="../css/style.defaultprint.css" rel="stylesheet" type="text/css" /></head><body>' +     DocumentContainer + '</body></html>')
  setTimeout(WindowObject.print(), 5);
  WindowObject.close();
}

I even tried using WindowObject.onload = WindowObject.print(); 我什至尝试使用WindowObject.onload = WindowObject.print(); instead of setTimeout(WindowObject.print(), 5); 而不是setTimeout(WindowObject.print(),5); still it doesn't seem to work. 仍然似乎不起作用。 I saw a similar post, but its solutions did not work for me. 我看到了类似的帖子,但是它的解决方案对我不起作用。

Check this url. 检查此URL。 It contain few example for printing content from page.It has all you need. 它包含一些从页面打印内容的示例,它具有您所需要的一切。

I had use jQuery Print Element 1.2 for print, in this, if you have large content to print then you need to increases time out from 50 to 500,other wise it will show blank page as you face issue, but for me it is only happend in Chrome browser, other then that i haven't face this issue. 我曾经使用jQuery Print Element 1.2进行打印,在这种情况下,如果您要打印大量内容,则需要将超时时间从50增加到500,否则,当您遇到问题时,它将显示空白页面,但是对我来说,这仅仅是发生在Chrome浏览器中,除此之外我还没有遇到这个问题。 check printElement js. 检查printElement js。 below url contain nice example with demo and source. 网址下方包含带有演示和源代码的漂亮示例。

Check this : jQuery Print Page Options 检查此: jQuery打印页面选项

Here is the code , which will help you. 这是代码,它将为您提供帮助。

function printClick(receipt_bg) {
    var DocumentContainer = $('.receipt_bg').html();
    var WindowObject = window.open("", "printElementWindow", "width=650,height=440,scrollbars=yes");
    WindowObject.document.writeln('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">'+ '<html><head><title>test print receipt</title>    <link href="../css/style.defaultprint.css" rel="stylesheet" type="text/css" /></head><body>' +     DocumentContainer + '</body><script type="text/javascript">setTimeout(printPage(),1000);  function printPage(){focus();print();}<\/script></html>')
    WindowObject.close();
 }

This will work for you, here i added one javascript function to your window code, which will executed after timeout. 这将为您工作,在这里我向您的窗口代码添加了一个JavaScript函数,该函数将在超时后执行。 try it, and let me know , is it work for you or not. 尝试一下,让我知道,它是否对您有用。 you can extend or decrees timeout as per your content. 您可以根据您的内容延长或减少超时。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM