如何打印特定的 div 區域？

Question

我正在將 print function （作為按鈕）添加到我的項目中。 具體來說，當用戶按下“打印”按鈕時，用戶可以打印日歷的特定 div 區域（不僅是 div 內容）。

我嘗試了以下代碼，但它沒有打印整個 div 區域，第二個問題是運行此代碼后我無法在瀏覽器上執行任何操作（頁面已死）。 順便說一下，它也只打印 div 內容。

       on(dijit.byId("printCalendarButton"), "click", function(event) {
           var calendarContainer = dojo.byId("calendarContainer").innerHTML;   
           var originalContents = document.body.innerHTML;
           document.body.innerHTML = calendarContainer;
           window.print();
           document.body.innerHTML = originalContents;
       });

我也嘗試使用 css，但它也只打印頁面的一部分：

@media print {
  body * {
    visibility: hidden;
  }
  #calendarContainer * {
    visibility: visible;
  }
  #calendarContainer {
    position: absolute;
    left: 0;
    top: 0;
  }
}

打印問題：

有什么好的想法嗎？ 謝謝！

Answer 1

這是打印單個元素及其內容所需的基本打印安排。 請特別注意 CSS，當您使用body *隱藏正文內的所有元素時，這也會隱藏要打印的元素。

要將可打印元素帶到打印視圖，它們都必須顯示。 這是使用#printable, #printable * {display: block;}規則制作的。 #printable *這里很重要，因為body *規則已按類型隱藏了body內的所有元素。 因為類型具有更高的特異性，所以我們不能用任何其他選擇器覆蓋它。

為了使body *按預期工作，即隱藏頁面上的所有內容， body中不能有孤立的文本節點，所有內容都必須包含在元素中。

 const but = document.querySelector('#printButton'); but.addEventListener('click', e => { window.focus(); window.print(); });

 @media print { body * { display: none; } #printable, #printable * { display: block; } }

 <p>Some text visible on the screen only.</p> <div id="printable"> <p>This element is printed only (with its wrapper), but is visible also on the screen.</p> </div> <button id="printButton">Print</button> <p>More text visible on the screen only.</p>

如果內容僅部分顯示在紙上，則必須將其縮放以適合紙面，或將其拆分為多個頁面。 現有規則也有可能正在定義邊距和其他內容。 如果是這種情況，您也必須在打印規則中覆蓋這些規則。 媒體查詢不排除現有規則，如果沒有被覆蓋，它們仍然會被應用。

您可以在 jsFiddle 玩一個演示，它還顯示了孤立的文本節點是如何打印的。