如何打印可滾動的 DIV 內容

Question

有一個網站，我想打印div的內容。 問題是 div 是可滾動的，我無法打印所有內容。 我已經在所有 div 上嘗試了display:none ，除了我要打印的那個，然后使用了 Google Chrome 的 Awesome Screenshot 擴展，但它不會只滾動那個 div。

我猜我在 HTML 中閱讀了有關使用 Javascript 的信息，但我不知道如何使用該代碼。 這不是我的網站，那么如何注入該代碼以便打印內容？

Answer 1

我不確定您使用的是哪個網站 - 但在 IE 中您可以打開 F12 開發人員工具，找到您要顯示的 div 並即時修改樣式：

{
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
}

然后它會導致 div 顯示它的所有內容，沒有滾動條......希望這會有所幫助！

Answer 2

沒有看到頁面或不知道它的布局，很難知道該建議什么看起來不可怕。

但是，如果隱藏所有其他內容（我假設在打印樣式表中）有效，那么您可以添加：

@media only print {
   #idOfYourDiv {
     width: auto;
     height: auto;
     overflow: visible;
   }
}

一次顯示所有內容。

Answer 3

讓所有父母都可見

我為此苦苦掙扎了幾個小時，最后注意到問題是某些父標簽阻止了 div 完全可見，而是在打印件上顯示了來自某些父標簽的滾動條。

因此，最終有效的解決方案是將所有規則（在其他答案中提到）應用於可能位於中間的所有可能的父標簽，還包括一個!important規則，這樣它們就不會被繞過。

像這樣：

@media print {
  body, .CLASS-of-parent-tag, #ID-of-div-with-long-content {
    display: block !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin-left: 0 !important;
  }
}

這適用於我項目中的幾乎所有情況。

Answer 4

使用這個 JS 函數：
可打印的 DIV 是div1

function printpage(){
    var originalContents = document.body.innerHTML;
    var printReport= document.getElementById('div1').innerHTML;
    document.body.innerHTML = printReport;
    window.print();
    document.body.innerHTML = originalContents;
}

Answer 5

我的回答基於@Porschiey和@Paul Roub給出的答案，並稍加補充。

他們給定的解決方案在大多數情況下都對我有用，除了我想打印的<div>將 CSS 設置為position: fixed的情況。 在生成的打印中，這通常只包含能夠適應加載頁面上<div>實際大小的內容。
因此，我還必須將位置 CSS 屬性更改為relative的，以便可以打印所有內容。 因此，對我有用的結果 CSS 是這樣的：-

{
    display: block; /* Not really needed in all cases */
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
}

Answer 6

谷歌消息更新了他們的 div。 用這個：

(function() {
    var originalContents = document.body.innerHTML;
    var printReport= document.querySelector("body > mw-app > mw-bootstrap > div > main > mw-main-container > div > mw-conversation-container > div > div > div > mws-messages-list")
    document.body.innerHTML = printReport.innerHTML;
    document.body.style.display = 'block';
    document.body.style.overflow = 'visible';
    window.print();
    document.body.innerHTML = originalContents;
}())