问题:
I have a HTML table which i am printing successfully,what i am trying to do is outside my table i am trying to print the select option also which is selected and one of my...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I have a HTML table which i am printing successfully,what i am trying to do is outside my table i am trying to print the select option also which is selected and one of my column is type as number so as printing the table i want to align that to right
here is the link fiddle
What i am trying to do when user clicks on print button the print page should contain Company name
at the top
i am using below function to print
function printData() {
var divToPrint = document.getElementById("printIndentTable");
newWin = window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('#print').on('click', function() {
printData();
})
Note: If there is any bettr option to print the html table i am open to it
回答1:
Use @media print { }
to apply styles to an element that will show up only on print screen.
Quick solution would be to create css classes that would show/hide elements on print/screen mode.
i.e.
.show-on-print{
display: none;
}
@media print {
.show-on-print{
display:block;
}
.hide-on-print{
display: none;
}
}
Then you apply css class to element with company name to hide it:
<h5 id="commonHeader" class="hide-on-print">Company Name</h5>
And add table row with column holding also instance of company name element, that will have show-on-print
css class:
<tr class="show-on-print"><th colspan="3"><h5>Company Name</h5></th></tr>
Fiddle: https://jsfiddle.net/niklaz/qxbhv2u0/3/
Full example ( better check fiddle, since SO snippet won't allow print command working well):
function printData() {
var divToPrint = document.getElementById("printIndentTable");
newWin = window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('#print').on('click', function() {
printData();
window.location = 'Header.html';
})
.show-on-print{
display: none;
}
@media print {
.show-on-print{
display:block;
}
.hide-on-print{
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container" align="center">
<form id="indentForm" autocomplete="on">
<div class="row ">
<div class="col-lg-4 col-4 brder">
<h5 id="commonHeader" class="hide-on-print">Company Name</h5>
<select class="dropDownIndent" id="outlet" name="outlet">
<option>XYZ</option>
</select>
</div>
<div class="col-lg-4 col-4">
<h5 id="commonHeader">Company Code</h5>
<input type="text" class="form-control dropDownIndent" value="E2156" name="outletCode" id="companyCode">
</div>
</div>
<hr style="border: 1px solid #41451f">
<button type="button" id="print" class="commonButton">
<i class="fas fa-save"></i> Print
</button>
<div class="table-responsive" id="commonDvScroll">
<table id="printIndentTable" class="table table-bordered table-hover ">
<tr class="show-on-print"><th colspan="3"><h5>Company Name</h5></th></tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Alfreds </td>
<td>Futterkiste</td>
<td class="text-right">5500</td>
</tr>
<tr>
<td>Francisco</td>
<td> Chang</td>
<td class="text-right">7700</td>
</tr>
<tr>
<td>Ernst </td>
<td>Handel</td>
<td class="text-right">2233</td>
</tr>
<tr>
<td>Helen </td>
<td> Bennett</td>
<td class="text-right">4444</td>
</tr>
<tr>
<td>Yoshi</td>
<td> Tannamuri</td>
<td class="text-right">6666</td>
</tr>
<tr>
<td>Giovanni</td>
<td> Rovelli</td>
<td class="text-right">77</td>
</tr>
</table>
</div>
</form>
</div>