javascript 打开带有不同HTML内容的打印对话框窗口

wn9m85ua 于 5个月前发布在 Java

关注(0)|答案(4)|浏览(55)

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

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

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

Chrome中的打印对话框：*

JavaScript

来源：https://stackoverflow.com/questions/26786460/open-print-dialog-window-with-different-html-content

4条答案

按热度按时间

t8e9dugd1#

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和支持的浏览器列表。

赞(0）回复(0）举报 5个月前

uinbv5nw2#

我不确定这是否真的是对你问题的回答，因为你的问题很少详细说明你打开一个新窗口的意思。
如果你在/page/one上，你想打开一个链接/report/page，并自动弹出打印对话框.

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

字符串
如果你不想让那个页面总是打开打印对话框，那么当你想打印的时候，就把指向新页面的链接设置为/report/page?print=1或类似的效果，当你在URL中找到它时，触发onload事件。

赞(0）回复(0）举报 5个月前

ykejflvf3#

在div中包含可打印的内容。例如：
超文本标记语言：

<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。谢谢

赞(0）回复(0）举报 5个月前

kg7wmglp4#

有一个很好的JavaScript插件叫做PrintThis，它可以很容易地完成这个任务。
您只需要使用jQuery选择器并调用插件，例如：