Javascript 在页面上打印元素内容的跨浏览器解决方案是什么？

我目前正在尝试打印页面上某个元素的内容，我发现了以下资源：

http://www.808.dk/?code-javascript-print
http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/108117
http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

他们都在做一些我已经做过的变化，如下所示

function printelement() {
    var parentdiv = $(this).parent().parent();
    var iframeEle = $(document.createElement("iframe")).attr("id", "print" + formParams.fpid).css({ width: "2250px", display: "none" }).appendTo("body");
    var doc = document.getElementById("print" + formParams.fpid).contentWindow.document;
    doc.open();

    //get stylesheets
    $("link[type='text/css']").each( function() {
        doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
    });

    //writes all the contents of div to new iframe
    $(parentdiv).each( function() {
        doc.write($(this).html());
    });

    //print the iframe
    var giframe = parentdiv.contents().find("iframe");
    var printdiv2 = giframe.prevObject[0].id;

    if(printdiv2) {
        if($.browser.msie) {
            var iedoc = giframe.prevObject[0].contentWindow.document;
            iedoc.execCommand('print', false, null);
        } 
        else { giframe.prevObject[0].contentWindow.print(); }
    } 
    else {
         if($.browser.msie){
            doc.execCommand('print', false, null);
         } 
         else { iframeEle[0].contentWindow.print(); }
    }
}

函数printelement（）{
var parentdiv=$（this.parent（）.parent（）；
var iframele=$（document.createElement（“iframe”）.attr（“id”，“print”+formParams.fpid）.css（{width:“2250px”，display:“none”}）.appendTo（“body”）；
var doc=document.getElementById（“打印”+formParams.fpid）.contentWindow.document；
doc.open（）；
//获取样式表
$（“link[type='text/css']）。每个（函数（）{
文件以（“”）号填写；
});
//将div的所有内容写入新的iframe
$（parentdiv）.each（函数（）{
doc.write（$（this.html（））；
});
//打印iframe
var giframe=parentdiv.contents（）.find（“iframe”）；
var printdiv2=giframe.prevObject[0].id；
if（printdiv2）{
如果（$.browser.msie）{
var iedoc=giframe.prevObject[0].contentWindow.document；
iedoc.execCommand（'print'，false，null）；
} 
else{giframe.prevObject[0].contentWindow.print（）；}
} 
否则{
如果（$.browser.msie）{
doc.execCommand（'print'，false，null）；
} 
else{iframele[0].contentWindow.print（）；}
}
}

---

这似乎在FF和Chrome中工作得很好（尽管Chrome一直告诉我我不能在一定时间内打印）。然而，在IE中，它只是给我一个空白的结果。我如何才能让这些代码跨浏览器使用，或者以不同的方式使用？

我不想弄乱iFrame（我觉得有点不舒服），我会执行以下操作：

• 将
  中的所有内容包装到

  ..

• 当用户选择打印时，将该特殊元素放在单独的div中，隐藏

  #mainContent

  ，然后打印整个页面
• （确保打印时所有CSS都设置了隐藏背景等）
• 包含一个链接以返回“正常”视图，该视图将恢复页面
• （您可能还希望通过特定于打印的CSS隐藏“关闭打印视图”链接）

if（$（'#mainContent'）。长度==0）
$（'body'）.children（）.wrapAll（''）；
var toPrint=$（'whateverToPrint'）；
var origParents=[toPrint.prev（），toPrint.parent（）]；
toPrint.appendTo（'body'）。wrap（''）；
$（''）。附加到（'#printWrapper'）。单击（函数（e）
{
e、 预防默认值（）；
//将图元移回原位
if（origParents[0]。长度>0）
TopPrint.insertAfter（原始客户端[0]）
其他的
toPrint.prependTo（origParents[1]）；
//删除包装并恢复原始内容
$（'#printWrapper'）。删除（）；
$（'#mainContent'）.show（）；
});
$（'#mainContent'）.hide（）；
setTimeout（函数（）
{
window.print（）；
}, 100); // 等待DOM赶上

---

听起来不错，还是我在重新发明轮子？

你在使用html5元素吗？ie无法打印，但有一个湿婆…你为什么不使用打印媒体样式表？不需要脚本。我没有编写此代码，但我现在也没有时间将其更改为此功能。从DOM中取出元素并将其插入新文档的问题是，它可能会破坏文档该部分的布局，即使您包含了原始文档中的样式表。@RobG不确定“新文档”是什么意思，但还是有一个很好的警告。但是如果你将内容移动到

iframe

，你仍然会遇到这个问题。我同意这有点黑客，但我也觉得这同样黑客。在这一点上，我真的希望有一个简单的直接的方法在javascript中实现这一点，而不必与显示器或类似的东西杰克。我基本上只有一天的时间来做这件事，否则打印会一直被破坏，直到下一组更新出来。

if ($('#mainContent').length == 0)
   $('body').children().wrapAll('<div id="mainContent" />');
var toPrint = $('#whateverToPrint');
var origParents = [toPrint.prev(), toPrint.parent()];
toPrint.appendTo('body').wrap('<div id="printWrapper"></div>');
$('<a href="#">Close Print View</a>').appendTo('#printWrapper').click(function(e)
{
    e.preventDefault();

    // Move the element back into place
    if (origParents[0].length > 0)
        toPrint.insertAfter(origParents[0])
    else
        toPrint.prependTo(origParents[1]);

    // Remove wrapper and restore original content
    $('#printWrapper').remove();
    $('#mainContent').show();
});
$('#mainContent').hide();
setTimeout(function()
{
    window.print();
}, 100); // wait for DOM to catch up