打印后未应用css和bootstrap

siv3szwd  于 2023-04-08  发布在  Bootstrap
关注(0)|答案(1)|浏览(140)

点击第一个输出页面上的提交按钮后,它的css部分消失了,只显示表单的简单和默认页面。它不能满足我的要求。如果只使用内联css,那么它将工作,但不能在外部css中工作。请帮助我,我正在附加代码和输出,我得到了我想要的输出。

HTML代码

<div id="parent">
  <div class="col-md-11 mx-auto">
    <div class="main-title text-center mb-3">RELIEVING LETTER</div>
    <div class="form-row mb-2">
      <div class="col-md-2">
        <label class="heading" for="validationDefault02">Date:-</label>
      </div>
      <div class="col-md-3">
        <b><label for="" id="rlvRDate">Resign</label></b>
      </div>
    </div>
    <div class="form-row mb-2">
      <div class="col-md-2">
        <label class="heading" for="validationDefault02">Name:-</label>
      </div>
      <div class="col-md-3">
        <b><label for="" id="rlvFullname">Fullname</label></b>
      </div>
      <div class="col-md-2">
        <label class="heading" for="validationDefault02">Emp Code:-</label>
      </div>
      <div class="col-md-3">
        <b><label for="" id="rlvEmpID">EmpID</label></b>
      </div>
    </div>
  </div>
  <div class="col-lg-12 mx-auto">
    <hr class="hr-line" />
  </div>
  <div class="col-md-11 mx-auto mb-2" id="rlv-ltr">
    <div class="row mb-5">
      <p>Dear <b><label for="" id="rlvFirstName">firstName</label></b>,</p>
      <div class="col-md-11">
        <p>
          This is to inform you that we are accepting your resignation dated <b><label for=""
              id="rlvRDate1">ResignDate</label></b> and officially releasing you on <b><label for=""
              id="rlvLastDate">RelieveDate</label></b>.
        </p>
        <p>
          Please complete all transition process before your last
          working date.
        </p>
        <p>
          Thank you so much for all your contribution. We wish you all
          the best in your next endeavors.
        </p>
      </div>
      <div class="col-md-11">Thank You.</div>

    </div>
    <div class="col-lg-12 mx-auto">
      <hr class="hr-line" />
    </div>
  </div>
</div>
<div class="row">
  <input type='button' class="btn btn-success btn-sm mx-auto" value='Submit' onclick='myApp.printDiv()' />
</div>

JS代码

var myApp = new function () {
    this.printDiv = function () {
        // Store DIV contents in the variable.
        var div = document.getElementById('parent');

        // Create a window object.
        var win = window.open(''); // Open the window. Its a popup window.
        win.document.write(div.outerHTML);     // Write contents in the new window.
        win.print();       // Finally, print the contents.
    }
  }

点击前获取的输出

点击后得到的输出

qhhrdooz

qhhrdooz1#

要设置打印内容的样式,您可以在CSS文件中使用@media print规则。
例如,要更改打印内容的字体大小,可以将以下代码添加到CSS文件中:

@media print {
  body {
    font-size: 12pt;
  }
}

使用**@media print {}**编写的代码将考虑打印

相关问题