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

问题描述

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

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?

Chrome中的打印对话框：

Print dialog box in Chrome:

推荐答案

打印对话框

在玩了一段时间（和一些谷歌搜索）之后，我想到了< a href = http://jsfiddle.net/liormb/3s4g33d9/ rel = nofollow noreferrer>此解决方案：

我添加了 non-printable 类到当前视图， printable 类到可打印容器元素。在我的CSS中，我使用了 css媒体查询其中 @media屏幕和 @media打印状态包含相应的显示行为：

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.

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

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