如何使用普通 javascript 和無 ZD223E1439188E476C2249Z 打印帶有顏色 styles 的 div 的 html 內容和圖像

Question

I have for 2 years been using jQuery printArea() library whenever I needed to print a section in my html web page, but now I have a use case where I want to achieve the same with only javascript. 我在網上嘗試了很多解決方案，但都沒有包括我的顏色 styles 和圖像。

這是我到目前為止所嘗試的。

<html>
<head>
  <style>
    #dvContainer {
        background-color: yellow;
    }
    @media print {
        body * {
           visibility: hidden; // part to hide at the time of print
           -webkit-print-color-adjust: exact !important; // not necessary use if colors not visible
        }

        #dvContainer {
           background-color: blue !important;
        }
    }
  </style>
</head>

<body>
    <div id="dvContainer">
        This content needs to be printed.
        <div style="background:limegreen; border:1px solid blue; padding:30px; margin:4%; ">
          Testing the styles inside printed div
          <img src="my-photo.png" width="60px"/>
        </div>
    </div>
    <hr/>
    <button id="printNow" onclick="divPrinting();" > Print now </button>
    <hr/>

    <script type="text/javascript">
      function addStyling(){
        document.style.background = "skyblue";
      }
      function divPrinting(){
          var divContents = document.querySelector("#dvContainer").innerHTML;
          var printWindow = window.open('', '', 'left=40,top=40,height=500,width=900');
          printWindow.document.write('<html>');
          printWindow.document.write('<head> <title> document-printed-by-javascript </title> </head>');
          printWindow.document.write('<body>');
          printWindow.document.write(divContents);
          printWindow.document.write('</body></html>');
          //printWindow.document.print();
          //printWindow.document.close();
          //printWindow.focus();
          printWindow.print();
          printWindow.close();
      }
    </script>

</body>

</html>

Answer 1

<html>
<head>
  <style>
    #dvContainer {
        background-color: yellow;
    }
    @media print {
        body * {
           visibility: hidden; // part to hide at the time of print
           -webkit-print-color-adjust: exact !important; // not necessary use if colors not visible
        }

        #dvContainer {
           background-color: blue !important;
        }
    }
  </style>
</head>

<body>
    <div id="dvContainer">
        This content needs to be printed.
        <div style="background:limegreen; border:1px solid blue; padding:30px; margin:4%; ">
          Testing the styles inside printed div
          <img src="my-photo.png" width="60px"/>
        </div>
    </div>
    <hr/>
    <button id="printNow" onclick="divPrinting();" > Print now </button>
    <hr/>

    <script type="text/javascript">
      function addStyling(){
        document.style.background = "skyblue";
      }
      function divPrinting(){
      var divContents = document.getElementById("dvContainer").innerHTML; 
            var a = window.open('', '', 'left=40','top=40','height=500', 'width=500'); 
            a.document.write('<html>'); 
            a.document.write('<head> <title> document-printed-by-javascript </title> </head>'); 
            a.document.write('<body>'); 
            a.document.write(divContents); 
            a.document.write('</body></html>'); 
            a.document.close(); 
            a.print();
      }
    </script>

</body>

</html>

Answer 2

我為 vBulletin 網站制定了以下解決方案。 它將隱藏所有元素（接受正文），添加一個可見的 div，將 HTML 復制到該 div，打印，然后撤消。

CSS

@media print
{
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 99%;
    page-break-after: avoid;
    page-break-before: avoid;
  }

  .nonPrintableArea { display: none;}

  .isaPrintableArea { display: block; }
}

jQuery

$('print-button-selector').on('click',  function(e){
  //

  // get div to print

  // 1) get HTML to be printed

  var html2print = $('div-selector').html();

  // 2) add non print class to hide all elements (accept BODY) from @media print

  $('body *').addClass('nonPrintableArea');

  // 3) create div to be printed, with HTML to be printed, prepend to BODY

  $('body').prepend('<div class="isaPrintableArea">' + html2print + '</div>');

  // 4) print

  window.print();

  // 5 remove printable div

  $('.isaPrintableArea').remove();

  // remove non print class from all elements

  $('body *').removeClass('nonPrintableArea');
});

如何使用普通 javascript 和無 ZD223E1439188E476C2249Z 打印帶有顏色 styles 的 div 的 html 內容和圖像

問題描述

2 個解決方案

解決方案1
0 2021-01-21 14:11:18

解決方案2
0 2021-04-07 04:38:05

如何使用普通 javascript 和無 ZD223E1439188E476C2249Z 打印帶有顏色 styles 的 div 的 html 內容和圖像

問題描述

2 個解決方案

解決方案1 0 2021-01-21 14:11:18

解決方案2 0 2021-04-07 04:38:05

解決方案1
0 2021-01-21 14:11:18

解決方案2
0 2021-04-07 04:38:05