使用 Javascript 动态生成 HTML 页面答案

【问题标题】：Generate HTML-page dynamically using Javascript使用 Javascript 动态生成 HTML 页面
【发布时间】：2015-12-21 16:32:30
【问题描述】：

我有一个元素列表，我希望用户能够仅打印单击的元素，而不是整个周围的页面。元素如下所示：

<div class="element" id="#element1">Element 1</div>
<div class="element" id="#element2">Element 2</div>
<div class="element" id="#element3">Element 3</div>

为了能够只打印用户点击的元素，我使用这段代码来获取点击的任何元素：

jQuery(document).ready(function($) {
    $( '.element' ).click(function() {
        var clickedEl = $(this).attr('id');
        printDiv( clickedEl );
        return false;
    });
});

被点击元素的 id 然后被传递给一个函数，创建一个非常简单的用于打印的 HTML 页面：

function printDiv(id) {    
    var printContents = document.getElementById(id).innerHTML;
    var printContentsBefore = '<html><head>\
    <link rel="stylesheet" href="/css/blabla_print.css" type="text/css" />\
    </head><body><table><tr>';
    var printContentsAfter = '</tr></table></body></html>';
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContentsBefore + printContents + printContentsAfter;
    //document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

代码有点工作，但我有两个问题：

弹出的打印窗口大约有一半包含被点击元素的数据。窗户的另一半是空的。这怎么可能，我该如何解决？
在生成的页面中，我尝试加载 CSS 文件以格式化内容的外观，但没有任何运气。我想在这里做什么，如果可以，怎么做？

如果它是相关的；该代码正在基于 WordPress 的页面上使用。

谢谢！

【问题讨论】：

标签： javascript jquery wordpress printing

【解决方案1】：

我永远不会明白为什么人们会浪费这么多精力来获取元素的 ID，然后才使用 getElementById 再次获取他们已经拥有的元素...

$(".element").on("click",function() {
    printDiv(this);
});

function printDiv(elem) {
    var before = '...',
        after = '...',
        result = before + elem.innerHTML + after;
    // now do stuff
}

值得注意的是，window.print() 不一定会立即触发。它不是同步的。它只是告诉浏览器它应该打开打印框。因此，如您所见，将 originalContents 重置回您的内容可能会也可能不会搞砸。

您可能希望有一个“取消”按钮，样式为

@media print {
    .cancelbutton {display:none}
}

实际重置的是哪个。

另一个注意事项是您正在删除页面的innerHTML。除了body 元素本身之外，您可能拥有的任何事件处理程序都将被完全消灭。请注意这一点。

我个人会建议一种不同的方法，即打开一个新窗口/选项卡，其中只包含要打印的内容（例如，您可以打开一个窗口并 document.write 到它）。

【讨论】：

感谢您的总体回答和反馈。我已经尝试删除重置为原始内容，但问题仍然存在。虽然，我认为这让我找到了解决方案。似乎 window.print() 很多时候都会提前触发。顺便问一下，你对我的第二个问题有意见吗？