I am trying to have a link which on click does windows print function on a particular html element that includes a logo.
The logo appears if I try the link in firefox browser but the logo is not appearing with chrome and microsoft edge.
When if I do a window.print() on the whole document body the image is appearing with all 3 browsers.
Can help me point to the right direction to solve the issue with print with logo in chrome and edge for the element.
TestPage.jsp
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="/WEB-INF/anti_csrf.tld" prefix="anti_csrf" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title><spring:message code="Common.Info1.ApplicationName" text="Common.Info1.ApplicationName"/></title>
<link rel="stylesheet" href="<c:url value="/resources/css/main.css"/>"/>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css" title="no title" charset="utf-8">
<link rel="stylesheet" href="<c:url value="/resources/css/spinner.css"/>"/>
</head>
<body>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div><select class="form-control" id="yy" name="yy" onChange="actionRefresh()">
<c:forEach var="i" begin="1" end="21" step="1">
<option value="i" selected>${i+1}</option>
</c:forEach>
</select>
</div>
<div class="row form-element-margin">
<div class="col-sm-11"> </div>
<div class="col-sm-1">
<a href="#" onclick="printDiv('generateData')"><i class="fa fa-print fa-2x" aria-hidden="true"></i></a>
</div>
<div style="font-family: Arial, Helvetica, sans-serif;font-size: 10pt;" id="genericData">
<div style="font-family: Arial, Helvetica, sans-serif;font-size: 10pt;" class="row form-element-margin">
<div class="col-sm-12 col-xs-12 txt_right">
<c:if test="${not empty requestScope.logo}">
<label class="header"><img height="35" src="<c:url value="/resources/assets/${requestScope.logo}" />"/></label>
</c:if>
</div>
<div class="col-xs-12 col-sm-4"> </div>
<div class="col-sm-4 text-center">
<label class="header" ><b><c:out value="${requestScope.ReportTitle1}" /></b></label></br>
<label class="header"><b><c:out value="${requestScope.ReportTitle2}" /></b></label>
</div>
</div>
</div>
<div>Some more text</div>
<script src="<c:url value="/resources/js/Testmenu.js" />"></script>
</body>
</html>
Testmenu.js
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}