Print Dialog

Question

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

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

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

Chrome中的

打印对话框：

Answer 1

我不确定这是否真的是您问题的答案，因为您的问题很少详细说明您打开新窗口的含义。

如果你在/ page / one并且你想要一个链接打开/报告/页面并自动打开打印对话框......那么就像在加载事件上触发window.print一样简单，例如

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

如果您不希望该页面始终打开打印对话框，则在您要打印时，以及在URL中找到该页面时，链接到新页面/report/page?print=1或其他相关内容触发onload事件。

Answer 2

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列表。

Answer 3

有一个很好的Javascript插件，名为 PrintThis ，非常容易实现。

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

$('selector').printThis();

https://github.com/jasonday/printThis

Answer 4

在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.Thanks

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

4 个答案:

Print Dialog