使用javascript打印DIV的內容

我目前正在處理一個打印div內容的任務。目前我正在使用approach。如果div小於屏幕，這可以正常工作。我的問題是，我需要打印（報告）的div是正常屏幕高度的兩倍或三倍。使用javascript打印DIV的內容

當我打控制+ P.我只能看到只是在屏幕上捕獲。

2015-11-04 Chris

您正在使用的瀏覽器中的內容..？ –

我正在使用chrome。 – Chris

這裏是示例代碼示例，希望它能幫助你。隨意評論，如果你需要額外的東西。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $("#btnPrint").live("click", function() { 
      var divContents = $("#dvContainer").html(); 
      var printWindow = window.open('', '', 'height=400,width=800'); 
      printWindow.document.write('<html><head><title>DIV Contents</title>'); 
      printWindow.document.write('</head><body >'); 
      printWindow.document.write(divContents); 
      printWindow.document.write('</body></html>'); 
      printWindow.document.close(); 
      printWindow.print(); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1"> 
    <div id="dvContainer"> 
     This content needs to be printed. 
    </div> 
    <input type="button" value="Print Div Contents" id="btnPrint" /> 
    </form> 
</body> 
</html>

來源

2015-11-04 07:00:03

我已經實現了您建議的內容，並將樣式表添加爲鏈接。但是，樣式表不在打印預覽上進行渲染或生效。 – Chris

您是否動態生成文本 –

如何使用打印查詢？

@media print { 
    .selector{ 
    /*some css*/ 
    } 
}

您可以使用此，並重新安排你的div在打印過程

來源

2015-11-04 07:58:17

我實際上使用過，問題是我只能看到打印預覽，屏幕上有什麼。我的div報告有2-3個屏幕的高度。 – Chris

@Chris您需要重新安排您的組件，或者將工作表分成2列或更改內容大小 –

使用javascript打印DIV的內容

回答

相關問題