什麼是用於在頁面上打印元素內容的跨瀏覽器解決方案？

目前我正在試圖打印頁面上的元素的內容，我發現以下資源，什麼是用於在頁面上打印元素內容的跨瀏覽器解決方案？

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中它只是給我空白的結果。我怎樣才能讓這段代碼跨瀏覽器，或以不同的方式做呢？

來源

2011-10-13 Metropolis

你使用的是html5元素嗎？即扼流器在印刷他們，但有一個shiv ... – albert

你爲什麼不只是使用印刷媒體樣式表？不需要腳本。 – RobG

我沒有編寫這段代碼，但我現在也沒有時間將其更改爲此功能。 – Metropolis

而不是I幀搞亂（感覺相當哈克給我），我要做到以下幾點：

包裹都在<div id="mainContent">...</div>
當用戶選擇打印您的<body>內的內容，地方特殊元素在一個單獨的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

聲好，還是我重新發明輪子？

來源

2011-10-13 22:57:09

從DOM中取出元素並將其插入到新文檔中的問題是，即使包含原始樣式表，也可能會破壞文檔的該部分的佈局。 – RobG

@RobG不確定'新文檔'是什麼意思，但仍然是一個很好的警告。但是，如果將內容移至「iframe」，您仍然會遇到該問題。 –

我確實認爲它有點駭人聽聞，但我也覺得這是一件駭人聽聞的事。在這一點上，我真的希望有一個簡單的直接的方式來做到這一點的JavaScript，而不必與顯示器或類似的東西插孔。我基本上還有一天可以做到這一點，否則打印將被打破，直到下一組更新消失。 – Metropolis

什麼是用於在頁面上打印元素內容的跨瀏覽器解決方案？

回答

相關問題