打开具有不同HTML内容的新打印对话框窗口 [英] Open new print dialog window with different HTML content

问题描述

为了打开当前页面的打印对话框，我们会这样做：

 < a href = javascript：window.print（）>打印< / a> 
 

如何在当前页面中创建一个链接，该链接将打开具有不同上下文的打印对话框 $ b

解决方案

打印对话框

玩过（和一些googling）后，我出来了这个解决方案：

我向当前视图和 printable添加了不可打印 code>类可打印容器元素。在我的CSS中，我使用媒体查询， code> @media screen 和 @media print states包含相应的显示行为：

  @media screen {
 .printable {display：none; } 
 .non-printable {display：block; } 
} 
 @media print {
 .printable {display：block; } 
 .non-printable {display：none; } 
} 
  

现在，我可以从当前视图打印新内容

查看此 jsFiddle 和支持的浏览器列表。 / p>

In order to open a print dialog for the current page we do something like so:

<a href="javascript:window.print()">Print</a>

How to make a link in the current page that will open the print dialog with different context than the actual page?

---

Print dialog box in Chrome:

解决方案

Print Dialog

After playing around (and some googling), I came out with this solution:

I added a non-printable class to the current view and printable class to the printable container element. In my CSS, I used css media queries where @media screen and @media print states contains the corresponding display behavior:

@media screen {
    .printable { display: none; }
    .non-printable { display: block; }
}
@media print {
    .printable { display: block; }
    .non-printable { display: none; }
}

Now, I can print new content from my current view without opening a new tab or changing my current view.

Check out this jsFiddle and the supported browser's list.

这篇关于打开具有不同HTML内容的新打印对话框窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！