Question

我目前正在尝试在页面上打印元素的内容，并且我找到了以下资源，

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(); }
    }
}

这似乎在FF和Chrome中运行得很好（虽然Chrome一直告诉我我不能在一定时间内打印）。但是，在IE中它只是给我空白的结果。如何让这些代码成为跨浏览器，或者以不同的方式进行操作？

Answer 1

而不是搞乱iframe（对我来说感觉相当苛刻），我会做以下事情：

在<body>

<div id="mainContent">...</div>

当用户选择打印时，将该特殊元素放在单独的div中，隐藏#mainContent，然后打印整个页面
（确保您在打印时将所有CSS设置为隐藏背景等）
包含一个链接以返回“正常”视图，该视图会恢复页面
（您可能也希望通过特定于打印的CSS隐藏“关闭打印视图”链接）

...

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

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

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

1 个答案: