【问题标题】：Open print dialog window with different HTML content打开具有不同 HTML 内容的打印对话框窗口
【发布时间】：2014-11-06 18:10:24
【问题描述】：

为了打开当前页面的打印对话框，我们执行如下操作：

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

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

Chrome 中的打印对话框：

【问题讨论】：

标签： javascript html css printing

【解决方案1】：

Print Dialog

在玩耍（和一些谷歌搜索）之后，我得出了this 解决方案：

我将non-printable 类添加到当前视图，并将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; }
}

现在，我可以打印当前视图中的新内容，而无需打开新标签或更改当前视图。

查看此jsFiddle 和supported browser 的列表。

【讨论】：

嘿 Lior，很好的答案，如果我想打印嵌入在对象标签或 iframe 中的 pdf 文件怎么办？在这种情况下有解决方案吗？喜欢你答案中的创造力。这是迄今为止我在互联网上找到的最好的！

【解决方案2】：

我不确定这是否真的是对您问题的回答，因为您的问题几乎没有详细说明您打开新窗口的意思。

如果您在 /page/one 上并且希望打开 /report/page 链接并自动调出打印对话框...那么这就像在加载事件上触发 window.print 一样简单，例如

<body onload='window.print()'>

如果您不希望该页面始终打开打印对话框，则在您要打印时创建指向新页面 /report/page?print=1 或类似效果的链接，并且当您在 URL 中找到该链接时触发加载事件。

【讨论】：

很抱歉回复很晚。 window.print() 是一种使用当前内容打开内置浏览器打印对话框的方法，这不是我的意图。我想打开与页面内容不同的打印对话框。

【解决方案3】：

在 div 中包含可打印的内容。喜欢：

HTML：

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

JQuery:

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }

它只会打印可打印的 div。谢谢

【讨论】：

【解决方案4】：

有一个很好的 Javascript 插件，叫做 PrintThis，可以很容易地完成这项工作。

您只需要使用jQuery 选择器并调用插件，例如：

$('selector').printThis();

https://github.com/jasonday/printThis

【讨论】：