Question

我正在执行一些脚本来向页面添加一些html并向页面上的所有元素添加一些类。然后我通过执行以下代码调用打印：

window.print();

现在用户将打印页面或取消。在这个动作我需要删除该HTML代码并删除这些类。那么，在哪个事件我可以执行代码来删除那个html代码并删除这些类？

Answer 1

您可以使用@media标记提供特定于打印的样式。

@media print {
  body { font-size: 10pt }
}

您可以使用不想打印的样式隐藏数据。

查看详情here

Answer 2

我遇到了同样的问题。首先，我必须添加一个打印库。我使用了JQuery.PrintPage。然后我创建了第二个网页，这是使用打印按钮打印的确切内容。这样，如果用户“打印”页面，他们就会获得确切的页面，如果他们使用我的“打印”按钮进行打印，则会得到打印机格式的版本。

我相信这是我必须添加的所有代码。我已将其添加到我的详细信息页面.onReady()

$("#print-link").button(
    {                
        icons: { primary: "ui-icon-print" }
    }
).printPage('@printlink');

预览我在这里的生产网站http://www.sc-pa.com/testsearch/parcel/details/0001020003

这种方法的最佳部分是优雅地失败。如果由于某种原因javascript被禁用。打印按钮将改为打开一个新窗口，因为它是由JqueryUI设置的超链接，用户可以使用本机浏览器打印功能。

这是链接（不是我的漂亮打印页面直接暴露给用户） http://www.sc-pa.com/testsearch/parcel/PrettyPrint/0001020003

Answer 3

我认为你正在接近这个完全错误，你应该像其他人所说的那样接受媒体查询。然而，只是为了屎和咯咯笑，你可以使用以下真正糟糕的“解决方案”：

(function() {
    document.querySelector('a').addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();

        window.print();

        var hideContent = function() {
            if (document.hasFocus) {
                var dataElem = document.getElementById('data');
                dataElem.parentNode.removeChild(dataElem);

                clearInterval(interval);
            }
        };

        var interval = setInterval(hideContent, 50); 
    });
}());

Demo adjusted to your question including another ugly hack for when the class is assigned too slowly

基本上它会在打印对话框后检查窗口是否具有焦点。但你再次不应该这样做。

我不知道浏览器支持，它可能（也可能应该）炸毁你的电脑。

BTW我是否已经提到媒体查询是要走的路？因为他们是。

打印完成或取消时如何执行某些JavaScript

3 个答案: