使用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的页面上使用。
谢谢!
答
我永远无法理解为什么人们浪费这么多的努力得到一个元素的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()在很多时候很早就开始了。你是否对我的第二个问题有评论? – danjah