HiGeorge616,
Refer below code. You need to include the style to the printWindow by setting the style. Set id to the css style and add by fetching using document.getElementById.
This will print whereever you place the qr code above the image.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Portrait ID Card Authentication</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="forprinters.css" media="print" />
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<!-- Our Custom CSS -->
<!-- <link rel="stylesheet" href="style.css"/>-->
<link href="css2/style2.css" rel="stylesheet" />
<link rel="stylesheet" href="style2.css" />
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<style id="table_style" type="text/css">
#parent {
position: relative;
width: 210mm;
height: 257mm;
border: solid 1px;
font-size: 24px;
text-align: center;
padding: 1cm;
}
#child {
position: absolute;
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
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 210mm;
min-height: 297mm;
padding: 20mm;
margin: 10mm auto;
background: white;
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 257mm;
}
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
.Image1 {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container" id="centered" style="margin: 0 auto; margin-top: 1%; text-align: justify; text-align: center; margin-left: 5%;">
<asp:Button ID="btnPrint" runat="server" CssClass="btn btn-primary navbar-btn" BackColor="SteelBlue" Width="150px" Height="34px" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
</div>
<asp:Panel ID="pnlContents" runat="server">
<div class="book">
<div class="page" id="parent">
<div class="subpage">
<asp:Image ID="Image1" runat="server" ImageUrl="" BorderStyle="None" Width="210mm" Height="257mm" />
<div id="child1">
<div id="child">
<asp:Image ID="Image2" runat="server" ImageUrl="" BorderStyle="None" Width="86px" Height="90px" />
</div>
</div>
</div>
</div>
</div>
</asp:Panel>
</form>
<script>
window.onload = addListeners();
function addListeners() {
document.getElementById('child1').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp() {
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e) {
window.addEventListener('mousemove', divMove, true);
}
function divMove(e) {
var div = document.getElementById('child1');
div.style.position = 'absolute';
div.style.top = e.clientY + 'px';
div.style.left = e.clientX + 'px';
}
function PrintPanel() {
var panel = document.getElementById("<%=pnlContents.ClientID %>");
var startStr = "<!--startPrint-->";
var printWindow = window.open('', '', 'height=500,width=400');
printWindow.document.write('<html><head><title>Template</title>');
printWindow.document.write('<style type = "text/css">');
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head><body >');
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
}, 5000);
return false;
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
</body>
</html>
