javascript - 在不遵循 css 的 javascript 中打印页面

Question

我在 javascript 中打印一个 div，我在其中放置了一个 css，为什么它不遵循我的 css？我在我的 css 中放入的任何东西都没有，或者它对安排我的打印部分没有影响。任何人都可以教我如何用 javascript 代码和 css 安排打印页面来安排我的打印吗？

我如何在这种情况下应用我的 css，

这是我的代码:

function printDiv() {
  var divToPrint = document.getElementById('printme');
  var htmlToPrint = '' +
    '<style >' +
    'body {' +
    'font-family: arial, sans-serif ;' +
    'font-size: 12px ;' +
    '}' +

    'header-cert{' +
    'text-align: center;' +
    'text-decoration: underline;' +
    '}' +

    '</style>';

  htmlToPrint += divToPrint.outerHTML;
  newWin = window.open("");
  newWin.document.write(htmlToPrint);
  newWin.print();
  newWin.close();
}

<div id="printme">
  <div class="border">
    <div class="row">
      <div class="cliniclogo" style="background-image: url()">
      </div>
      <div class="col-md-12 text-center">
        <div class="header-cert">
          <p class="certheader"></p>
          <p class="certheader" id="clinic_name"></p>
          <p class="certheader"><label id="clinic_address"></label>, &nbsp; <label id="city_name"></label> </p>
          <p class="certheader"><label id="province_name"></label>, &nbsp; <label id="zipcode"></label> </p>
        </div>
        <!-- header-cert -->
      </div>
      <div class="col-md-12 text-center">
        <p class="medcert">MEDICAL CERTIFICATE</p>
      </div>
    </div>
    <!-- row -->
    <div class="row">
      <div class="col-md-4 col-md-offset-10">
        <p>Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
      </div>
    </div>
    <!-- row -->
    <div class="row">
      <div class="col-md-4">
        <p class="certmarg">To Whom It May Concern:</p>
      </div>
      <!-- col-md-4 -->
    </div>
    <!-- row -->
    <div class="row">
      <div class="col-md-12">
        <p class="startindent">THIS IS TO CERTIFY that &nbsp; <label id="cert_name"></label> &nbsp; of &nbsp; <label id="cert_address"></label> &nbsp; was examined and treated at the &nbsp; <label id="cert_clinic_name"></label> &nbsp; on <label id="cert_check_up_date"></label>          with the following diagnosis: &nbsp; <label id="cert_diagnosis"></label> &nbsp; and would need medical attention for &nbsp; <label id="cert_physician"></label> &nbsp; days barring complication.</p>
      </div>
    </div>
    <!-- row -->
    <div class="signatory">
      <div class="row">
        <div class="col-md-4 col-md-offset-10">
          <u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
        </div>
      </div>
    </div>
    <!-- signatory -->
  </div>
  <!-- printme -->

为什么它不能使我的 header-cert 以打印为中心？它没有遵循我放置的 css。

Answer 1

我想你在 header-cert 中错过了 .，所以使用 .header-cert。

function printDiv() {
        var divToPrint = document.getElementById('printme');
        var htmlToPrint = '' +
        '<style rel="text/stylesheet">' +
        'body {' +
            'font-family: arial, sans-serif ;' +
            'font-size: 12px ;' +
            '}' +

        '.header-cert{' +
            
            'text-align: center;' +
            'text-decoration: underline;' +
            '}' +

        '</style>';

        htmlToPrint += divToPrint.outerHTML;
        //newWin = window.open("");
        newWin = window;
        newWin.document.write(htmlToPrint);
        newWin.print();
        newWin.close();
}

document.getElementById('printBtn').addEventListener('click', function(){

  printDiv();
})

<div id="printme">
                  <div class="border">
                    <div class="row">
                        <div class="cliniclogo" style="background-image: url()">
                        </div>
                        <div class="col-md-12 text-center">
                          <div class="header-cert">
                          <p class="certheader">Cerheader title</p>
                          <p class="certheader" id="clinic_name"></p>
                          <p class="certheader"><label id="clinic_address"></label>, &nbsp; <label id="city_name"></label> </p>
                          <p class="certheader"><label id="province_name"></label>, &nbsp; <label id="zipcode"></label> </p>
                          </div><!-- header-cert -->
                        </div>
                        <div class="col-md-12 text-center">
                          <p class="medcert">MEDICAL CERTIFICATE</p>
                        </div>
                    </div><!-- row -->
                    <div class="row">
                      <div class="col-md-4 col-md-offset-10">
                        <p>Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
                      </div>
                    </div><!-- row -->
                    <div class="row">
                      <div class="col-md-4">
                        <p class="certmarg">To Whom It May Concern:</p>
                      </div><!-- col-md-4 -->
                    </div><!-- row -->
                    <div class="row">
                      <div class="col-md-12">
                        <p class="startindent">THIS IS TO CERTIFY that &nbsp; <label id="cert_name"></label> &nbsp; of &nbsp; <label id="cert_address"></label>
                         &nbsp; was examined and treated at the &nbsp; <label id="cert_clinic_name"></label> &nbsp; on <label id="cert_check_up_date"></label>
                        with the following diagnosis: &nbsp; <label id="cert_diagnosis"></label> &nbsp; and would need medical attention for 
                        &nbsp; <label id="cert_physician"></label> &nbsp; days barring complication.</p>
                      </div>
                    </div><!-- row -->
                    <div class="signatory">
                        <div class="row">
                            <div class="col-md-4 col-md-offset-10">
                              <u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
                            </div>
                        </div>
                    </div><!-- signatory -->
                    
                    
                    <button id="printBtn">Print<button>