我有一张大桌子,我想打印或转换为pdf 。
现在问题是大部分列都留给了打印。
我不知道打印为columns
为left
的原因。
请参考(以下代码段不起作用)Jsfiddle :https://jsfiddle.net/85okepx8/12/
以下是演示:
$('#print').click(function(){
$('#examples').printThis();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.12.2/printThis.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" class="btn btn-warning" id="print">Print</a>
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th>Order Number</th>
<th>PO Number</th>
<th>Quantity</th>
<th>Due Date</th>
<th>Billing Address</th>
<th>Shipping Address</th>
<th>Installing Address</th>
<th>Design</th>
<th>Production</th>
<th>Shipping</th>
<th>Install</th>
<th>Production Manager</th>
<th>Project manager</th>
<th>Sales Representatives</th>
<th>Shipping Method</th>
<th>Created At</th>
<th>Status</th>
<td style="display:none;"></td>
</tr>
</thead>
<tbody>
<tr>
<td>lNsbTEo</td>
<td>eweeedm</td>
<td>fdvjhdhd</td>
<td>1958</td>
<td>445</td>
<td>3</td>
<td>2018/01/27 17:03</td>
<td>fnhbbhf</td>
<td>shipping address by me</td>
<td>installing address</td>
<td>design</td>
<td>production</td>
<td>shipping</td>
<td>install</td>
<td>production manager</td>
<td>project manager</td>
<td>kfgkk</td>
<td>shipping method</td>
<td style="color:#0277bd">16-01-2018</td>
<td class="statusNotClass">
Completed
</td>
<td>
</td>
</tr>
<!-- second row -->
<tr>
<td>lNsbTEo</td>
<td>eweeedm</td>
<td>fdvjhdhd</td>
<td>1958</td>
<td>445</td>
<td>3</td>
<td>2018/01/27 17:03</td>
<td>fnhbbhf</td>
<td>shipping address by me</td>
<td>installing address</td>
<td>design</td>
<td>production</td>
<td>shipping</td>
<td>install</td>
<td>production manager</td>
<td>project manager</td>
<td>kfgkk</td>
<td>shipping method</td>
<td style="color:#0277bd">16-01-2018</td>
<td class="statusNotClass">
Completed
</td>
<td>
</td>
</tr>
<!-- end of second row -->
</tbody>
</table>
这样做的目的是获得客户相关数据的最终副本,以便更好地了解客户数据。
请提前帮助我!
答案 0 :(得分:0)
这里所有的人都在展示!
function printContent(el) {
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#" class="btn btn-warning" id="print" onclick="printContent('examples')">Print</a>
<div class="container" id="examples">
<table class="table table-dark">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th>Order Number</th>
<th>PO Number</th>
<th>Quantity</th>
<th>Due Date</th>
<th>Billing Address</th>
<th>Shipping Address</th>
<th>Installing Address</th>
<th>Design</th>
<th>Production</th>
<th>Shipping</th>
<th>Install</th>
<th>Production Manager</th>
<th>Project manager</th>
<th>Sales Representatives</th>
<th>Shipping Method</th>
<th>Created At</th>
<th>Status</th>
<td style="display:none;"></td>
</tr>
</thead>
<tbody>
<tr>
<td>lNsbTEo</td>
<td>eweeedm</td>
<td>fdvjhdhd</td>
<td>1958</td>
<td>445</td>
<td>3</td>
<td>2018/01/27 17:03</td>
<td>fnhbbhf</td>
<td>shipping address by me</td>
<td>installing address</td>
<td>design</td>
<td>production</td>
<td>shipping</td>
<td>install</td>
<td>production manager</td>
<td>project manager</td>
<td>kfgkk</td>
<td>shipping method</td>
<td style="color:#0277bd">16-01-2018</td>
<td class="statusNotClass">
Completed
</td>
<td>
</td>
</tr>
<!-- second row -->
<tr>
<td>lNsbTEo</td>
<td>eweeedm</td>
<td>fdvjhdhd</td>
<td>1958</td>
<td>445</td>
<td>3</td>
<td>2018/01/27 17:03</td>
<td>fnhbbhf</td>
<td>shipping address by me</td>
<td>installing address</td>
<td>design</td>
<td>production</td>
<td>shipping</td>
<td>install</td>
<td>production manager</td>
<td>project manager</td>
<td>kfgkk</td>
<td>shipping method</td>
<td style="color:#0277bd">16-01-2018</td>
<td class="statusNotClass">
Completed
</td>
<td>
</td>
</tr>
<!-- end of second row -->
</tbody>
</table>
</div>