I want to open a new window/tab, put some HTML in the document, then bring up the browser print dialog to print that new window. I am using the following to accomplish this:
var w = window.open();
w.document.write(html);
w.document.close();
Where html contains:
...<body onload="window.print()">...</body>...
This all works, the window pops up, and the print dialog is shown for the new page, however, for some reason the browser isn't waiting for all the images on the page to load before showing the print dialog. It's causing some images not to print.
There are many images, and they are dynamically generated on the server side (takes about 1 sec each to load). How do I force the browser to only print once all the images are loaded?
This happens in Chrome and Firefox that I've confirmed. I appreciate any help.
Try putting your printer call in an onload event for the last image.
<img onload="window.print()" ... />
EDIT:
Full answer by OP as seen below:
I came up with the following script using #chockleyc's answer as inspiration. I couldn't just use the last image because they don't necessarily load in order. The following script will print the page after all images have loaded (uses jQuery):
var hasPrinted = false;
$(document).ready(function(){
$('img').load(function(){
var imgs = $('img');
var loadedAll=true;
for(var i=0;i<imgs.length;i++){
loadedAll &= $(imgs[i])[0].complete;
}
if (loadedAll && !hasPrinted) {
console.log('printing');
hasPrinted = true;
window.print();
}
else {
console.log('not all images have loaded');
}
})
});
Try changing it from the body.onload event to the window.onload event.
w.window.onload = window.print()
Or something like that.
Related
I have created the print function that is working fine in chrome but in firefox its printing blank page. because print dialog comes before the PDF fully loaded so when we hit "ok" its perform the action to print. Question is how to add delay to print dialog to appear after PDF fully Loaded.
Here is My Code:
function printPDF(url)
{
var w = window.open(url);
var FIREFOX = /Firefox/i.test(navigator.userAgent);
if (FIREFOX) {
if (typeof w.print === 'undefined') {
setTimeout(function(){printPDF(url);},3000);
} else {
w.print();
}
}else{
w.print();
}
}
I suspect you are getting a blank page because your window 'w' contains no printable text. The PDF is opened via a plugin which falls outside your w.print(); request.
var w = window.open(url);
w.print();
I suspect your options are limited - the plugin opens the PDF - a different plugin could have a different js library so a universal solution might not be available.
I am having an issue with print on Safari. My System is Windows 7, and this function works fine in all other browsers except Safari. Here is the situation:
window.onload = function(){
console.log('before print');
window.print();
}
It won't output the log in console panel, but the print page will appear first, after i choose cancel in print page, the log will be output.
Does any body came up with this issue? Any help will be appreciated.
Updated
Here is the situation i have:
We need to print a page whose content can be changed by user by checking and unchecking check box, and only the content part of this page should be printed, so we create a new page that only contains the content for printing. In this page, we need to hide the unnecessary content that is not selected by user, so we need to do some DOM operation before window.print() get called. The console.log() is just an example code for observing. I tried to add an <div id='test'>Test HTML</div> in test HTML and add
var test = document.getElementById('test');
test.style.background = 'yellow';
before window.print();, it shows the same result in my Safari browser, the 'Test HTML' will not turn to yellow until i click cancel button in print panel, so it's not just the console.log issue.
Updated
I am using Safari 5.1.7(7534.57.2) on Windows 7
For me, the setTimeout solution didn't work. I found this jQuery plugin https://github.com/jasonday/printThis that has plenty of workarounds for window.print() because it seems not to be fully supported by all browsers.
I took this line that worked for me Safari document.execCommand("print", false, null)
and this worked ok for me for now in safari and chrome
try {
document.execCommand('print', false, null);
}
catch(e) {
window.print();
}
This is odd behavior. I tested in Safari 6.1 on Mac.
But may I ask why you need to log something before the printing? Because it seems that all the functions are being executed before the printing panel pops up:
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
window.onload = function() {
$('body').html('before print');
console.log('before print');
window.print();
};
</script>
When you look at the print preview, the page will have the text "before print" on it. For some reason, the console will log the text only when the print panel closes, but in my opinion that doesn't really matter for your visitors. You can manipulate DOM and change the page before the printing process as you like.
After several times trying, below code works, but i don't know the reason, can anybody explain? Or this is a Safari Bug?
window.onload = function() {
$('body').html('After change');
setTimeout(window.print, 1000);
};
Safari prints the page before it is loaded unlike other browsers. Hence window.onload() can be used in the code of the newly opened html page. But if the page opened is non html content, then it is not possible. The below solution is global across browsers and type of content open.
var printWindow = window.open(url, '_blank');
$(printWindow).load(function()
{
this.print();
});
Adding one more solution which worked for my case:
First make your popup window.
$( ".myButton" ).click(function() {
var url = 'www.google.com';
var printWindow = window.open( url, '_blank');
printWindow.focus();
});
Then, inside the HTML page which is loaded in the popup:
$(window).bind("load", function() {
setTimeout( function () {
try {
document.execCommand('print', false, null);
}
catch(e) {
window.print();
}
}, 500);
});
I've looked around here and saw wonderful solutions how to print the content of a div using javascript by instantiating a new window and porting markup there.
My problem with that solution in SharePoint is that SP.*.js libraries load asynchronously and it freezes the print dialog screen or the browser itself.
Anybody was able to workaround this issue?
With sharepoint you can use ExecuteOrDelayUntilScriptLoaded to wait until SP.js loaded to make sure nothing freezes.
<script type="text/javascript">
function printPage(){
}
window.onload = function(){ ExecuteOrDelayUntilScriptLoaded(printPage, "sp.js"); };
</script>
I don't know SharePoint specifically, so I can't provide a specific example. However, it sounds like you are thinking of a technique like the one outlined on this other stackoverflow question.
Notice this is all one block of code that will execute sequentially. So we open a window, set the markup and print right away. No waiting around between those steps.
I would suggest that you don't call print at that point, but rather open the window, set the markup AND inject some more javascript in the new window markup. This new injected javascript will be where the actual printing takes places.
That injected script should have some logic to wait until certain script resources have finished loading after which it calls window.print(). Apparently window.onload doesn't fire until after all resources have finished loading. (onload doesn't fire until all content is either loaded or has failed to load). Here's a jquery example on stackoverflow. Also scripts are executed in the order the appear in the markup. So if your injected print window javascript is last, every other script above it must already be done. (So anything SharePoint injects in the markup should already have been executed).
For bonus points, if everything is going well, you could inject a 'loading mask' over the new print window and then hide the mask just before your javascript does its window.print().
The code given below will work with sharepoint, ASPX pages and with any browser. I tested the code with Sharepoint 2010 Visual webparts, and it works like a charm.
Place this Javascript code inside your webpart ASCX file
<script type="text/javascript">
function printPartOfPage(elementId) {
var printContent = document.getElementById(elementId);
var windowUrl = '';
var uniqueName = new Date();
var windowName = 'Print' ;
var printWindow = window.open(windowUrl, windowName, 'left=-20,top=-20,width=0,height=0');
printWindow.document.write('<HTML><Head><Title></Title>');
printWindow.document.write('</Head><Body style="margin-left:50px;margin-top:50px;font-size:10pt;">');
printWindow.document.write(printContent.innerHTML);
printWindow.document.write('</Body></HTML>');
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
</script>
& Update the print button ClientClick Event with
<img alt="" src="~/_layouts/images/WebpartCollection/Printer-30X30.jpg"
onclick="JavaScript:printPartOfPage('YourDivClientID');" />
I hope this will help you out.
<html>
<head>
<script type="text/javascript">
var URL = "http://localhost:8000/foobar/";
var W = window.open(URL); **Note1**
W.window.print();
</script>
</head>
<p> Print ME...............</p>
</html>
I am using this script to print a webpage.
My views render this page and The JS take care all other things.
But I dont want to open new window for that. So, What should I use instead of window.open(URL) so no new window opens. Similarly, I don't want to open new window for print function.So, Whenever I render this page it do all stuff on the same page. No new window, No new tab. How can I achieve this. I google but nothing seems working.
You can do this using a hidden iFrame (I'm using jquery for the example):
function loadOtherPage() {
$("<iframe>") // create a new iframe element
.hide() // make it invisible
.attr("src", "/url/to/page/to/print") // point the iframe to the page you want to print
.appendTo("body"); // add iframe to the DOM to cause it to load the page
}
This will load the page you want to print. To print, you can add javascript code to the print page so that it gets printed after loading:
$(document).ready(function () {
window.print();
});
This will print the page without showing a new window. I've tested this in IE8,9 and Google Chrome, so I'm not sure if this works for Safari or Firefox, though.
There's a nice example on MDN how to do that with a hidden iframe https://developer.mozilla.org/en-US/docs/Printing#Print_an_external_page_without_opening_it
In reference to #andragon's answer. updated on top of it.
You can do this using an iFrame(Not hidden because hidden iFrame prints the blank page in latest versions of browsers. You can hide after the print is triggered)
function loadOtherPage(link) {
$("<iframe class='printpage'>") // create a new iframe element
.attr("src", link) // point the iframe to the page link you want to print
.appendTo("body");
}
This will load the page link you want to print.
On loading the print page link you can call javascript.
$(document).ready(function () {
window.print();
});
window.onafterprint = function () {
$('.printpage', window.parent.document).hide();
}
This will print the page from the same window and onafterprint Event is triggered when a page has started printing, or if the print dialog box has been closed
window.parent.document is to hide the iFrame block on the parent page.
I'm using Asp .net core with razor html as view, in this case I have used window.print() to print the page then used window.onafterprint to back to the page where used want to be redirected.
You can use ViewBag to replace the "/NewSales" URL.
NOTE: window.onafterprint will be called whenever user clicks Cancel/Submit/Print button in that pop-up.
$(document).ready(function () {
window.print();
window.onafterprint = function () {
window.location.href = "/NewSales";
}
});
function CallPrint() {
var prtContent = document.getElementById('main');
var WinPrint = window.open('', '', 'width=800,height=650,scrollbars=1,menuBar=1');
var str = prtContent.innerHTML;
WinPrint.document.write(str);
WinPrint.document.close();
WinPrint.focus();
}
Call this javascript function on Print button click."main" is the id of the div which we have to print without opening into new window.I want to notify that this will print the current page div.
Try and rever in case of any issue.
Thanks,
Gourav
A while back I created a lightbox plugin using jQuery that would load a url specified in a link into a lightbox. The code is really simple:
$('.readmore').each(function(i){
$(this).popup();
});
and the link would look like this:
<a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a>
The plugin could also accept arguments for width, height, a different url, and more data to pass through.
The problem I'm facing right now is printing the lightbox. I set it up so that the lightbox has a print button at the top of the box. That link would open up a new window and print that window. This is all being controlled by the lightbox plugin. Here's what that code looks like:
$('.printBtn').bind('click',function() {
var url = options.url + ( ( options.url.indexOf('?') < 0 && options.data != "" ) ? '?' : '&' ) + options.data;
var thePopup = window.open( url, "Member Listing", "menubar=0,location=0,height=700,width=700" );
thePopup.print();
});
The problem is the script doesn't seem to be waiting until the window loads. It wants to print the moment the window appears. As a result, if I click "cancel" to the print dialog box, it'll popup again and again until the window loads. The first time I tried printing I got a blank page. That might be because the window didn't finish load.
I need to find a way to alter the previous code block to wait until the window loads and then print. I feel like there should be an easy way to do this, but I haven't found it yet. Either that, or I need to find a better way to open a popup window and print from the lightbox script in the parent window, without alternating the webpage code in the popup window.
You should put the print function in your view-details.php file and call it once the file is loaded, by either using
<body onload="window.print()">
or
$(document).ready(function () {
window.print();
});
Got it! I found an idea here
http://www.mail-archive.com/discuss#jquery.com/msg18410.html
In this example, they loaded a blank popup window into an object, cloned the contents of the element to be displayed, and appended it to the body of the object. Since I already knew what the contents of view-details (or any page I load in the lightbox), I just had to clone that content instead and load it into an object. Then, I just needed to print that object. The final outcome looks like this:
$('.printBtn').bind('click',function() {
var thePopup = window.open( '', "Customer Listing", "menubar=0,location=0,height=700,width=700" );
$('#popup-content').clone().appendTo( thePopup.document.body );
thePopup.print();
});
I had one small drawback in that the style sheet I was using in view-details.php was using a relative link. I had to change it to an absolute link. The reason being that the window didn't have a URL associated with it, so it had no relative position to draw on.
Works in Firefox. I need to test it in some other major browsers too.
I don't know how well this solution works when you're dealing with images, videos, or other process intensive solutions. Although, it works pretty well in my case, since I'm just loading tables and text values.
Thanks for the input! You gave me some ideas of how to get around this.
Are you sure you can't alter the HTML in the popup window?
If you can, add a <script> tag at the end of the popup's HTML, and call window.print() inside it. Then it won't be called until the HTML has loaded.