javascript - 用户打印时使用 jQuery 复制 HTML

Question

我需要制作一个网页，当用户点击文件 > 打印或 [cmd + p] 时，复制一篇文章 (HTML) 并将新文章放在原始文章旁边。这个想法是在线显示一个列表，然后从网页上打印一个可以切成两半的 2-up 纸质版本:2 个相同的列表，一张纸。我正在为自定义纸张布局使用打印样式表，并且正在使用 jquery 复制 HTML。

我坚持的部分是如何在用户看到打印对话框之前进行复制。我不希望默认情况下网页上有两篇相同的文章。我还想在打印完成后删除重复的文章，但这可能不那么重要。

<script>
/*  instead of window.onclick, is there an "on print" function? */
    window.onclick = function() {
        var $newArticle = $('article').clone();
        $($newArticle).css({'margin-left':'1.3cm'});
        $($newArticle).insertAfter("article");                 
        }
</script>

感谢您的任何建议。

Answer 1

I don't want there to be two identical articles on the webpage by default.

无需 JavaScript!文章在页面中出现两次，最初使用 CSS 隐藏一篇:

article.copy {
    display: none;
}

然后，使用另一个 CSS 规则，在打印页面上显示文章:

@media print {
    article.copy {
        display: block;
    }
}

DEMO

Mode information on@media和 a tutorial.不幸的是，@media 似乎在 IE8 及以下版本中不起作用。