JS function to print div - Doesn't work in Chrome? - javascript

I am using the below function in order to print a target Div using JS. This works fine in all browsers apart from chrome. The console throws the error: PrintElem is undefined.
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data) {
var mywindow = window.open('', 'to_print', 'height=600,width=800');
var html = '<html><head><title></title>' +
'</head><body onload="window.focus(); window.print(); window.close()">' +
data +
'</body></html>';
mywindow.document.write(html);
mywindow.document.close();
return true;
}
I have tried calling the function onclient click with the following:
PrintElement('[id$=divExport]');
PrintElement('divExport');
PrintElement('#divExport');
PrintElement('#ctl00_body_ucJobDetails_divExport');
PrintElement('ctl00_body_ucJobDetails_divExport');
It works in Firefox and incredibly in IE 9 and 11!
Any advice would be greatly appreciated.

Your function name is PrintElem(). But you are calling it as PrintElement(). Apart from this I don't see any other problem..
And use this line.
PrintElem('#divExport');

Related

why javascript window.print does not work correctly on phone

I preform a function to print content of a special div in document.
function printContent(el) {
var restorepage = $("body").html();
var printcontent = $("#" + el).clone();
$("body").empty().html(printcontent);
window.print();
$("body").html(restorepage);
}
my code run correctly on desktop, but on the phone; it print all the body content!
why does this happen?
thanks

jQuery doesn't work in Internet Explorer 11

My ajax success:function() runs a line of code which opens a new window and inserts data into it. Rigth now my code looks like this:
success: function(data) {
var url = location.href;
var w = window.open(url);
w.onload = function() {
w.$('#main').html(data);
};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
It works just fine in Chrome but If I want to run it in Internet Explorer 11 it won't execute w.$('#main').html(data). I also tried:
success: function(data) {
var url = location.href;
var w = window.open(url);
w.addEventListener('load', function() {
w.$('#main').html(data);
}, {
once: true
});
}
Which also works fine in Chrome but with IE it gives me the same result as the line above. Does anybody know why this code doesn't work in IE?
I found a solution in this thread:
addEventListener in Internet Explorer
I need to use attachEvent method instead of addEventListener or onload.

printing page as popup window is not working on chrome working on mozilla and IE

I am trying to print a page as popup window. For Mozilla and IE its working but on chrome a popup window appears but it gives "print preview failed".
Plunker demo
And portion of javascript is -
function PrintElem(elem) {
console.log($(elem).html())
Popup($( elem).html());
}
function Popup(data)
{
var printContent = data;
var disp_setting="toolbar=no,location=no,directories=no,menubar=no, scrollbars=no,width=600, height=800"
var myWindow = window.open("","",disp_setting);
myWindow.document.write(printContent);
myWindow.document.close();
myWindow.focus();
myWindow.print();
myWindow.close();
return true;
}
Not sure why Chrome is not happy with my script.
The setTimeout of 500 milliseconds worked:
function Popup(data)
{
var printContent = data;
var disp_setting="toolbar=no,location=no,directories=no,menubar=no, scrollbars=no,width=600, height=800";
var myWindow = window.open("","",disp_setting);
myWindow.document.open();
myWindow.document.write(printContent);
myWindow.document.close();
myWindow.focus();
setTimeout(function () {
myWindow.print();
myWindow.close();
}, 500);
return true;
}
If you are using JQuery, you can use $(document).ready(function () {});. Have a look at this here:
$(function () {
window.print();
window.close();
});
Thanks A.Wolff for your answer and VennilaSundarRajan for providing insight about issue -
I am posting here on this behalf.
The real problem was time rendering time by page.
use this-
myWindow.onload = function(){ this.print(); this.close(); }

Printing custom url with javascript not working

I'm trying to print another page on my domain by passing window.open the url, and using window.focus, window.print to print. However, the print preview shows only an empty page. I'm guessing I have to wait until the page is loaded, but I'm not sure exactly how to do this. Here's the code:
var newWin=window.open('http://mydomain.com');
newWin.focus();
newWin.print();
newWin.close();
I've tried stuff like
newWin.onload() {
newWin.print();
});
to no avail.
Edit 1:
var newWin=window.open('http://localhost:76');
newWin.focus();
newWin.onload = newWin.print();
newWin.close();
Same problem persists
Edit 2:
var newWin=window.open('http://localhost:76');
newWin.focus();
newWin.body.onload = newWin.print();
Adding newWin.close() here causes the print function to
bug out and only print the
title of the page. Otherwise, the page is printing properly with this
Edit 3:
function printWin(newWin) {
newWin.print();
newWin.close();
}
var newWin = window.open('http://localhost:76');
newWin.focus();
newWin.body.onload = printWin(newWin);
This causes the print to happen prematurely like before, previewing an empty page. wtf :(
Open the popup. Then check if the popup is ready. When it's ready, inject a javascript.
<script type="text/javascript">
var popup = window.open("b.htm");
var body;
function check() {
body = popup.document.getElementsByTagName("body");
if (body[0] == null) {
setTimeout(check, 50);
} else {
var n = popup.document.createElement("script");
n.src = "printandclose.js";
body.appendChild(n);
}
}
check();
</script>
printandclose.js
window.print();
window.open("", "_self");
window.close();
Let me know if it works. If you don't add window.open("", "_self"); a alert will popup telling the user that the window is about to close.

window.print not working in Firefox

function CallPrint() {
var prtContent = document.getElementById('<%= pnlDelete.ClientID %>');
var winPrint = window.open('', '', 'left=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0');
winPrint.document.write("<h3>Summary</h3><br />" + prtContent.innerHTML);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
I have a need where I have to print contents of a div. I am using above code to do so. It is working fine in IE but does nothing in Firefox. Am I missing something here that needs to be done in Firefox?
Instead of opening a new window without any URL, I opened this page in the window and accessed the contents of the pnlSummary from the opened window via window.opener object –
function CallPrint() {
var winPrint = window.open('Print.aspx', '', 'left=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0');
}
On Print.aspx page I used this function –
function Print() {
var prtContent = "<h3>Summary</h3>" + window.opener.document.getElementById('ctl00_cphContent_pnlSummary').innerHTML;
document.getElementById("printDiv").innerHTML = prtContent;
window.print();
window.opener.focus();
window.close(); }
and called it on body onload.
<body onload="Print();">
<form id="form1" runat="server">
<div id="printDiv">
</div>
</form>
</body>
This is working fine in both IE and Firefox.
Use setTimeout() function for loading the page. The example is given bellow link.
http://oraclehappy2help.blogspot.in/2012/09/child-window-printing-problem-solution.html
Uhm... your code seems to work fine for me, on Firefox 3.5 (Windows).
It's possible that are something wrong on your pnlDelete.ClientID?
Your javascript code is rendered well on the page?
Anyway I suggest you to use jQuery + a print plugin like this.
Check to ensure your panel has something. My guess is prtContent is undefined
Try this:
function CallPrint() {
var prtContent = document.getElementById('<%= pnlDelete.ClientID %>');
if (prtContent) {
var winPrint = window.open('', '', 'left=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0');
winPrint.document.write("<h3>Summary</h3><br />" + prtContent.innerHTML);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
else {
alert('No summary available for printing');
}
}
you can use JS Printer Setup https://addons.mozilla.org/en-us/firefox/addon/js-print-setup/"
which is Fire fox Depended addon most usefulladdon In web-app Kisok in Firefox to select printer
attached some example for attached printer and local printer it may help you to build without print dialog.
function EB_Print(printType) {
try{
var printerType = printType; // type of the Print Code : network
// Default Printer Configuring
var Default_printer = "Canon MG2500 series";
/** local Printer configuring via Network
** Config teh Local server use \\\\ to get \\
**/
var Organizer_Printer = "\\\\network\\Canon LBP2900";
jsPrintSetup.setPrinter(Default_printer);
jsPrintSetup.setSilentPrint(true);// withoud dialog
/** alert(jsPrintSetup.getPrintersList()); // Debugger for the attached Printers list
alert(jsPrintSetup.getPrinter()); // get the set printer Option
**/
// id network is selected It will print the page in network
if(printerType == 'network'){
jsPrintSetup.setPrinter(Organizer_Printer);
}
jsPrintSetup.print(); // Print the page
}catch (e) {
// TODO: handle exception
}
}
you could try a jquery plugin...
http://plugins.jquery.com/project/PrintArea

Categories

Resources