点击第一个输出页面上的提交按钮后,它的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.
}
}
1条答案
按热度按时间qhhrdooz1#
要设置打印内容的样式,您可以在CSS文件中使用@media print规则。
例如,要更改打印内容的字体大小,可以将以下代码添加到CSS文件中:
使用**@media print {}**编写的代码将考虑打印