javascript - 打开具有不同 HTML 内容的打印对话窗口

Question

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

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

如何在当前页面中创建一个链接，以打开与实际页面上下文不同的打印对话框？

---

Chrome 中的打印对话框:

Answer 1

Print Dialog

玩弄(和谷歌搜索)后，我得出了 this解决方案:

我将 non-printable 类添加到当前 View ，并将 printable 类添加到可打印容器元素。在我的 CSS 中，我使用了 css media queries其中 @media screen 和 @media print 状态包含相应的显示行为:

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

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

现在，我可以打印当前 View 中的新内容，无需打开新选项卡或更改当前 View 。

看看这个 jsFiddle和 supported browser的列表。