使用Javascript动态生成HTML页面

Question

I have a list of elements where I want the user to be able to print just the clicked element, and not the whole surrounding page. 我有一个元素列表，我希望用户能够仅打印所单击的元素，而不打印整个周围的页面。 The elements looks as follows: 元素如下所示：

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

To be able to print just the element the user clicks, I use this code to fetch whatever element is clicked: 为了仅打印用户单击的元素，我使用以下代码来获取单击的任何元素：

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

The id of the clicked element is then passed on to a function, creating a very simple HTML-page for print: 然后，将clicked元素的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;
}

The code sort of works, but I'm having two problems: 代码可以正常工作，但是我遇到两个问题：

The print window that pops up contains the data of the clicked element about half of the times. 弹出的打印窗口包含被单击元素的数据的大约一半。 The other half the window is empty. 窗口的另一半是空的。 How can that be, and how do I solve it? 那怎么可能，我该如何解决？
In the generated page I'm trying to load a CSS-file to format the way the content looks, but without any luck. 在生成的页面中，我试图加载CSS文件以格式化内容的外观，但是没有任何运气。 Is what I'm trying to do here at all possible, and if so how? 我想在这里做什么吗？如果可以，怎么办？

And in case it's relevant; 并且在相关的情况下； the code is being used on a WordPress-based page. 该代码正在基于WordPress的页面上使用。

Thanks! 谢谢！

Answer 1

I will never understand why people waste so much effort getting an element's ID, only to then use getElementById to get the element that they already had again... 我永远不会理解为什么人们会花很多精力来获取元素的ID，然后才使用getElementById来获取他们已经拥有的元素 ...

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

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

It's worth noting that window.print() does not necessarily fire immediately. 值得注意的是window.print()不一定会立即触发。 It's not synchronous. 这不是同步的。 It just tells the browser that it should bring up the Print box. 它只是告诉浏览器应该打开“打印”框。 Therefore, resetting originalContents back on your content may or may not mess it up, as you have seen. 因此，如您所见，在您的内容上重设originalContents可能会或可能不会使其混乱。

You may wish to have a "Cancel" button, styled with 您可能希望有一个“取消”按钮，其样式为

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

Which does the actual reset. 实际执行哪个重置。

Another note is that you are nuking the innerHTML of the page. 另一个需要注意的是，您正在使用页面的innerHTML 。 Any event handlers that you may have will be completely annihilated, except on the body element itself. 您可能拥有的所有事件处理程序都会被彻底摧毁，但body元素本身除外。 Just be aware of that. 请注意。

Personally I would suggest a different method, one that would involve opening a new window/tab with just the content to be printed (you can open a window and document.write to it, for example). 我个人会建议一种不同的方法，该方法包括打开一个仅包含要打印内容的新窗口/选项卡（例如，您可以打开一个窗口并document.write到其中）。

使用Javascript动态生成HTML页面

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-12-21 16:39:03

使用Javascript动态生成HTML页面

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-12-21 16:39:03

解决方案1
2 已采纳 2015-12-21 16:39:03