使用Javascript动态生成HTML页面

我有一个元素列表，我希望用户能够只打印点击的元素，而不是整个周围的页面。元素看起来如下：使用Javascript动态生成HTML页面

<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的页面上使用。

谢谢！

来源

2015-12-21 danjah

我永远无法理解为什么人们浪费这么多的努力得到一个元素的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）。

来源

2015-12-21 16:39:03

谢谢您的回答和一般反馈。我尝试删除重置为原始内容，但问题仍然存在。尽管如此，我认为这是我的一个解决方案。看起来window.print（）在很多时候很早就开始了。你是否对我的第二个问题有评论？ – danjah

使用Javascript动态生成HTML页面

回答

相关问题