User-1994446809 posted
Hello Forum,
I am trying to make two images in image controls to print out and fit the size of an A4 and a PVC card. After searching for solution for days I couldnt see any article that gave me a clear understanding. I tried to use print media
query to achieve this but it seems not to work; when the print preview is displayed, the first image in the control does not fit A4 size. Also, the second image in image control to print according to PVC card size. Please can anybody help me out and what can
be done to achieve this?
Here is my HTML, CSS and Print Script function for the two images
CSS Style for A4 Size
<style type="text/css">
#parent {
;
width: 400px;
height: 500px;
border: solid 1px;
font-size: 24px;
text-align: center;
}
#child {
;
right: 40px;
top: 40px;
cursor: move;
background-color: #fafafa;
border: solid 1px #00003D;
font-size: 24px;
text-align: center;
backface-visibility:hidden;
background:unset;
height:90px;
width:86px
}
@media print {
#Image3[size="A4"]{
width: 210mm;
height: 297mm;
margin: 0;
box-shadow: 0;
}
}
#Image3{
}
</style>
HTML and print function for A4 size
<div class="form-horizontal">
<br />
<asp:Panel ID="pnlContents" runat="server">
<div class="page" id="parent" style="margin: 0 auto; margin-top: 0%;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/cert5.jpg" width="400px" Height="500px" />
<div id="child1">
<div id="child">
<asp:Image ID="Image4" runat="server" BorderStyle="None" Width="86px" Height="90px" />
</div>
</div>
</div>
</asp:Panel>
<asp:Button ID="btnPrint" runat="server" CssClass="btn btn-primary navbar-btn" BackColor="SteelBlue" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
</div>
<script>
function PrintPanel() {
var panel = document.getElementById("<%=pnlContents.ClientID %>");
var startStr = "<!--startPrint-->";
var headHtml = window.document.head.innerHTML;
var headPrint = headHtml.substr(headHtml.indexOf(startStr) + 17);
var printWindow = window.open('', '', 'height=450,width=350');
printWindow.document.write('<html><head><title>Template</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(headPrint);
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
}, 5000);
return false;
}
</script>
CSS Style for PVC card
<style type="text/css">
#parent {
;
width: 400px;
height: 500px;
border: solid 1px;
font-size: 24px;
text-align: center;
border-radius:20px;
}
#Image1{
border-radius: 20px;
}
@media print{
.Image1{
width: 2.13in;
height: 3.38in;
margin: 0;
}
}
</style>
HTML for PVC Card size
<div class="container" id="centered" style="margin-top: -2%; font-family: 'Comfortaa';">
<div class="form-horizontal">
<br />
<asp:Panel ID="pnlContents" runat="server">
<div class="page" id="parent" style="margin: 0 auto; margin-top: 0%;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/cert5.jpg" width="400px" Height="500px" /> <div id="child1">
<div id="child">
<asp:Image ID="Image4" runat="server" BorderStyle="None" Width="86px" Height="90px" />
</div>
</div>
</div>
</asp:Panel>
<asp:Button ID="btnPrint" runat="server" CssClass="btn btn-primary navbar-btn" BackColor="SteelBlue" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
</div>
</div>
<script>
function PrintPanel() {
var panel = document.getElementById("<%=pnlContents.ClientID %>");
var startStr = "<!--startPrint-->";
var headHtml = window.document.head.innerHTML;
var headPrint = headHtml.substr(headHtml.indexOf(startStr) + 17);
var printWindow = window.open('', '', 'height=450,width=350');
printWindow.document.write('<html><head><title>Template</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(headPrint);
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
}, 5000);
return false;
}
</script>
