打印无效后增加表格宽度
我知道以前曾问过这种问题。但是我被困住并尝试了一切。我不知道如何解决这个问题。 这就是问题所在：详细信息的打印表格式和显示格式的宽度较小，并且值显示不正确。请帮忙。
查看要打印的页面
打印预览
这是我到目前为止所做的：
html文件：
<div class="card-body collapse in">
<div class="card-block big-font" id="print_content">
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Client</b></div>
<div class="panel-body">
<br>
<table class="table">
<tr>
<th>Name</th>
<td id="c_name"></td>
</tr>
<tr>
<th>Address</th>
<td id="c_add"></td>
</tr>
<tr>
<th>Contact No</th>
<td id="c_contact"></td>
</tr>
<tr>
<th>Client GST</th>
<td id="c_gst"></td>
</tr>
<tr>
<th>Pending Amount</th>
<td id="c_pen"></td>
</tr>
<br>
</table>
</div>
</div>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Purchase History</b></div>
<div class="panel-body">
<table class="table" id="p_history" >
</table>
</div>
</div>
</div>
<div class="col-md-12 no-print" style="text-align: center;">
<div id="printbtn" name="printbtn">
</div>
</div>
</div>
</div>
js
<script>
$(document).ready(function()
{
$('#clientnames').change(function(e)
{
e.preventDefault;
var client_id = $('#clientnames').val();
$.ajax({
method: 'POST',
url: "<?php echo base_url().'clients/get_client_info'; ?>",
data: {client_id: client_id},
success: function(res)
{
var parsed = JSON.parse(res);
$("#p_history tr").remove();
if(parsed.status_code == 1)
{
var dash = '-';
var i;
$('#client-tab').show();
$('#c_name').html(parsed.info['client_name']);
$('#c_add').html(parsed.info['client_address']);
$('#c_contact').html(parsed.info['client_phone']);
$('#c_gst').html(parsed.info['client_gst']);
if(parsed.balance == null || parsed.balance == 0)
{$('#c_pen').html('-');}
else
{ $('#c_pen').html(parsed.balance); }
var purchase = parsed.purchase;
var bills = parsed.bills;
//console.log(purchase);
//console.log(bills);
document.getElementById('printbtn').innerHTML = " ";
document.getElementById('p_history').innerHTML = " ";
if(bills.length != null || bills.length != 0)
{
$('#p_history').append('<th>Bill No</th><th> SGST</th><th> CGST</th><th>Total</th><th> Pending</th><th>Details</th>');
for( var i=0; i< bills.length; i++)
{
var prodobj = parsed.purchase[i];
var billobj = parsed.bills[i];
var p = null; var hsn = null; var h =null; var w = null;var r =null; var a = null;
bid = billobj['bill_id'];
var pending = '-';
if(billobj['bill_pending'] != 0 ){ pending = billobj['bill_pending'] ;}
$('#p_history').append('<tr><td>' + billobj['bill_no'] + '<div id="div'+i+'" class="collapse changethis">\
<div class="panel-body" float="right" id="print_content">\
<table class="table details" style="margin-right: -390px;margin-top:20px;" id="'+bid+'">\
<th class="prodname" colspan="">Product name</th>\
<th>HSN Code</th>\
<th>Height</th>\
<th>Width</th>\
<th>Rate</th>\
<th>Quantity</th>\
<th>Amount</th>\
<tr></tr>\
</table>\
</div> \
</div> </td><td>' + billobj['sgst'] + '</td><td>' + billobj['cgst'] + '</td><td>'+billobj['bill_grandtotal'] +'</td><td>'+ pending +'</td><td><a href="#div'+i+'" class="btn btn-info" data-toggle="collapse" vertical-align: middle;>+</a></td></tr>');
for(var j=0;j<purchase.length; j++)
{
if(billobj['bill_id'] == purchase[j]['bid'])
{
var a = '<td id="t">'+purchase[j]['product_name']+'</td><td>'+purchase[j]['hsncode']+'</td><td>'+purchase[j]['hsncode']+'</td><td>'+purchase[j]['height']+'</td><td>'+purchase[j]['width']+'</td><td>'+purchase[j]['width']+'</td><td>'+purchase[j]['rate']+'</td><td>'+purchase[j]['qty']+'</td><td>'+purchase[j]['amt']+'</td>';
var mh,mw;
var x = purchase[j]['bid'];
var m1 = purchase[j]['m1'];
var m2 = purchase[j]['m2'];
if(m1 == 1 && m2==1){ mh="ft";mw="ft"}
if(m1 == 2 && m2==2){ mh="inches";mw="inches"}
if(m1 == 3 && m2==3){ mh="cm";mw="cm"}
if(m1 == 4 && m2==4){ mh="mm";mw="mm"}
var table = document.getElementById(x);
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(1);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
// Add some text to the new cells:
cell1.innerHTML = purchase[j]['product_name'];
cell2.innerHTML = purchase[j]['hsncode'];
cell3.innerHTML = purchase[j]['height']+" "+mh;
cell4.innerHTML = purchase[j]['width']+" "+mw;
cell5.innerHTML = purchase[j]['rate'];
cell6.innerHTML = purchase[j]['qty'];
cell7.innerHTML = purchase[j]['amt'];
}
}
}
$('#printbtn').append('<br><button type="button" class="btn btn-info" data-toggle="modal" onClick="print_page()"> <i class="icon-print4" style="color:white;"></i> Print History</button>');
} //bills exist
if(bills.length == null || bills.length == 0)//if no bills
{ $('#printbtn').html('<br> No History'); }
} //endif status code is success
}//end of success
});
})
})
</script>
<script>
function print_page()
{
var printContents = document.getElementById("print_content").innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById("print_content").style.fontSize = "xx-large";
document.body.innerHTML = printContents;
//expand collapsible divs
$('div.changethis').addClass('in').css("height", "");
window.print();
document.body.innerHTML = originalContents;
window.location.href = "<?php echo site_url('clients/search'); ?>";
}
</script>
print.css
@media print {
.content-body
{
margin-left: -55%;
margin-top: -7%;
}
[class*="col-sm-"] {
/*float: left;*/
}
[class*="col-xs-"] {
/* float: left;*/
}
.print-col-3
{
width:100% !important;
}
.text-md-right{
float:right;
}
.col-sm-12, .col-xs-12 {
width:100% !important;
float:left !important;
}
.col-sm-11, .col-xs-11 {
width:91.66666667% !important;
}
.col-sm-10, .col-xs-10 {
width:83.33333333% !important;
}
.col-sm-9, .col-xs-9 {
width:75% !important;
}
.col-sm-8, .col-xs-8 {
width:66.66666667% !important;
}
.col-sm-7, .col-xs-7 {
width:58.33333333% !important;
}
.col-sm-6, .col-xs-6 {
width:50% !important;
}
.col-sm-5, .col-xs-5 {
width:41.66666667% !important;
}
.col-sm-4, .col-xs-4 {
width:33.33333333% !important;
}
.col-sm-3, .col-xs-3 {
width:25% !important;
}
.col-sm-2, .col-xs-2 {
width:16.66666667% !important;
}
.col-sm-1, .col-xs-1 {
width:8.33333333% !important;
}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
float: left !important;
}
body {
margin: 0;
padding: 0 !important;
min-width: 768px;
font-size: 2em !important;
}
.prodname{
}
.details{
/*margin-left: -590px; */
width:80em !important;
}
.container {
width: auto;
min-width: 750px;
}
a[href]:after {
content: none;
}
.print-col-1
{
float:left;
width:30%;
}
.print-col-2
{
float:right;
width:30%;
}
.noprint,
div.alert,
header,
.group-media,
.btn,
.footer,
.no-print,
#comments,
.nav,
ul.links.list-inline,
ul.action-links {
display:none !important;
}
.billto, .clientname , .clientphone, .date {
float:right;
margin-right:9%;
}
.billto{
margin-top:-9%;
}
/*displays all collapsible divs expanded when printing*/
.list {
display: inline;
}/**----x----*/
table{
width:auto !important;
}
}
2 个答案:
答案 0 :(得分：0)
我不确定您为什么将产品详细信息放入“不开票” TD中， 更好的方法是将产品详细信息放在下一个div中，这是一个示例：
<table class="table">
<thead>
<th>Bill No</th>
<th>SGST</th>
<th>CGST</th>
<th>Total</th>
<th>Pending</th>
<th>Details</th>
</thead>
<tbody>
<tr>
<td>12357-2018/2019</td>
<td>38.88</td>
<td>8.64</td>
<td>479.52</td>
<td>-</td>
<td>+</td>
</tr>
<tr style="display: none;" id="productDetails-productId">
<td colSpan="6">
You can put here details about product (You can put them in a table)
</td>
</tr>
</tbody>
</table>
答案 1 :(得分：0)
检查元素代码：
<div class="card-body collapse in">
<div class="card-block big-font" id="print_content">
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Client</b>
</div>
<div class="panel-body">
<br>
<br>
<table class="table">
<tbody>
<tr>
<th>Name</th>
<td id="c_name">qqq</td>
</tr>
<tr>
<th>Address</th>
<td id="c_add">Lane B, Koregaon Park</td>
</tr>
<tr>
<th>Contact No</th>
<td id="c_contact">8080808080</td>
</tr>
<tr>
<th>Client GST</th>
<td id="c_gst">27AAVCJ353JE922</td>
</tr>
<tr>
<th>Pending Amount</th>
<td id="c_pen">-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Purchase History</b></div>
<div class="panel-body">
<table class="table" id="p_history">
<th>Bill No</th>
<th> SGST</th>
<th> CGST</th>
<th>Total</th>
<th> Pending</th>
<th>Details</th>
<tbody>
<tr>
<td>12357-2018/2019
<div id="div0" class="collapse changethis">
<div class="panel-body" float="right" id="print_content">
<table class="table details" style="margin-right: -390px;margin-top:20px;" id="540">
<tbody>
<tr>
<th class="prodname" colspan="">Product name</th>
<th>HSN Code</th>
<th>Height</th>
<th>Width</th>
<th>Rate</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>Vinyl Printing with MS Frame</td>
<td>414243</td>
<td>4 ft</td>
<td>3 ft</td>
<td>20</td>
<td>3</td>
<td>432</td>
</tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
</td>
<td>38.88</td>
<td>8.64</td>
<td>479.52</td>
<td>-</td>
<td><a href="#div0" class="btn btn-info" data-toggle="collapse" vertical-align:="" middle;="">+</a></td>
</tr>
<tr style="display: none;" id="productDetails-productId">
<td colspan="6">
<div id="div0" class="collapse changethis">
<div class="panel-body" float="right" id="print_content">
<table class="table details" style="margin-left: -390px;margin-top:20px;" id="540">
<tbody>
<tr>
<th class="prodname" colspan="2">Product name</th>
<th>HSN Code</th>
<th>Height</th>
<th>Width</th>
<th>Rate</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12 no-print" style="text-align: center;">
<div id="printbtn" name="printbtn">
<br><button type="button" class="btn btn-info" data-toggle="modal" onclick="print_page()">
<i class="icon-print4" style="color:white;"></i> Print History</button>
</div>
</div>
</div>
</div>
@Mohammed Cherkaoui ：这是根据您的建议进行更改后的检查元素代码。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？