代码:
<style>
.center {
float: left;
text-align: center;
}
.center h3 {
color: #000;
font-weight: 600;
}
.left {
font-size: 14px;
float: left;
width: 30%;
color: #000;
}
.right {
font-size: 14px;
float: right;
width: 70%;
color: #000;
}
#bot {
margin-bottom: 2em;
}
#left {
font-size: 14px;
float: left;
width: 42%;
color: #000;
}
#right {
font-size: 14px;
float: right;
width: 58%;
color: #000;
}
table, td, th {
border: 1px solid #000;
text-align: left;
font-size: 14px;
font-weight: inherit;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
#pp {
font-size:14px;
color:#000;
}
.table-responsive {
overflow-x: hidden!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding:0px!important;
}
</style>
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success" style="float: right;" onclick='printDiv();'>Print Sheet</a>
</div>
<div id="print_wrapp">
<div class="col-md-12" id="bot">
<div class="col-md-2">
<img src="<?php echo base_url(); ?>uploads/images/Lingayas Vidyapeeth Logo.png" class="img-responsive" style="width: 110px;">
</div>
<div class="col-md-10">
<div class="center">
<h3>
Lingaya's Vidyapeeth, Fraidabad<br>
Award Sheet<br>
End Semester Examination<br>
(May-June, 2019)
</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div class="left">
<p>Department: </p>
</div>
<div class="right">
<p><?php echo $award[0]['department_name']?></p>
</div>
<div class="left">
<p>Program/Course: </p>
</div>
<div class="right">
<p><?php echo $award[0]['classes']?></p>
</div>
<div class="left">
<p>Subject Name: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject']?></p>
</div>
<div class="left">
<p>Session: </p>
</div>
<div class="right">
<p><?php echo $award[0]['session']?></p>
</div>
</div>
<div class="col-md-6">
<div class="left">
<p>Semester: </p>
</div>
<div class="right">
<p><?php echo $award[0]['yearsOrSemester']?></p>
</div>
<div class="left">
<p>Subject Code: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject_code']?></p>
</div>
<div class="left">
<p>Maximum Marks: </p>
</div>
<div class="right">
<p></p>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-12">
<div class="table-responsive">
<table id="example1" class="table table-striped table-bordered table-hover dataTable no-footer">
<thead>
<th>S.No.</th>
<th>Roll No.</th>
<th>Marks(In Figure)</th>
<th>Marks(in Words)</th>
</thead>
<tbody>
<?php
$i=1;
foreach($award as $row)
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $row['roll']; ?></td>
<td></td>
<td></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Pass: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Fail: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
</div>
</div>
</div>
<script>
function printDiv()
{
var divToPrint=document.getElementById('print_wrapp');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/bootstrap/css/bootstrap.css" type="text/css" /><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
</script>
在这段代码中,我只是在 div <div id="print_wrapp">
中运行打印内容通过点击功能即 printDiv
它工作正常,但问题是打印预览 css 没有正确显示 div 内容,下面提到了一张图片:
那么,我该如何解决这个问题呢?请帮助我。
谢谢
最佳答案
您也可以使用 media='screen,print' 将样式表应用于打印和屏幕
<link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>
或
<link ../bootstrap.min.css' rel='stylesheet' media='all'>
关于php - 我们如何在打印预览中添加CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59209865/