Javascript to print div inside external html page - javascript

Hello I am using the following javascript code to print a div layer from a webpage. Is there a way that this can be modified to print this div from from another page (for example print.php) not the one that is open in the moment ?
<script>function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
} </script>
and the link to make it work is: <a href="#" onclick="printDiv('printableArea')">

I think you are asking whether it's possible to print a DIV in another page.
If this is the question ,it is possible given these two page have some relation,so that the other page can get reference of the content page.
For example , print.php opens the content page by using window.open. Or , print.php is the parent page of the content page.

Related

Print function is not working properly on chrome

I'm trying to print a section of the page which a form with values. I'm using window.print();
It's working perfectly fine in Mozilla, but in Chrome and Edge it has problems.
The problem is, in the beginning it prints the whole page, and second time it prints the desired section. 3rd time again full page and 4th time again the section. What's wrong?
How I see it in Mozilla
How I see it in chrome
var printContents = document.getElementById('form-sectionResilience2').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents; // I need to add this line to return page to its orginal position

Button click not working after document is printed javascript

I have a div that contains text to be printed on external printers.
<div id="school">
<p>Who loves school?</p>
<img onClick=clickMe(1) src='clickImage.png' />
</div>
Below is the javascript that handles the click of the above image button and initiates a printing dialog,
function clickMe(id) {
const printContents = document.getElementById(id).innerHTML;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
The above javascript prints the div successfully, but with only 1 problem. After the print dialog exits, the image button stops responding to clicks until the page is refreshed.
Ideal behavior would be the button responding on each click without the need to refresh the page.
What am I missing?

Print event in angular

I am creating a project using angular. In my application i need to print the specific area of page. I know we can achieve this using media css but this is creating problem for me beacuse of lot of print functionalities are in the project. I am trying to below the method
#HostListener('window:keydown.control.p', ['$event'])
showPinned(event: KeyboardEvent) {
event.preventDefault();
var myDiv = document.getElementById("modal").innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<html><head><title></title></head><body>" +
myDiv + "</body>";
window.print();
document.body.innerHTML = oldPage
}
But when user cancel or confirm then all the events stopped working on application
Well, you replaced the generated html. But all the event handlers are gone. This makes sense for generating a page for print, but not not restore a fully working page. Either you reload the page or you generate the content for print in a different way. For example by creating a separated document instead of manipulating the existing one.

Javascript Print Multiple Webpages iFrame Content (Print All Button)

Using JavaScript, how do I create a print all button?
The 'Print All' button whenever clicked would iterate through an iFrame's different src's and print the content.
As a note, the iFrame is currently setup on a main webpage. There are navigation buttons to change the content src of the iFrame. This main webpage is set up to resemble navigating through slide content with navigation buttons. The navigation buttons are really navigating to different webpages.
So, I'm guessing that the content would need to be appended to a document or arrayed so that the content could then be printed all at once with the 'Print All' button.
I was successful at printing a 'Current Slide' (or iFrame content) with the following code:
function PrintCurrentSlide()
{
var el = document.getElementById('ifMain');
el.contentWindow.focus();
el.contentWindow.print();
return;
}
Now, I'm searching for an answer to navigate through the iFrame src's to print content with just one click.
Try this in your script
window.onload=function() {
window.frames["printf"].focus();
window.frames["printf"].print();
}
function print() {
var newWin = window.frames['printf'];
newWin.document.write('<body onload=window.print()>This is a new page I inserted</body>');
newWin.document.close();
}
function change(){
var url="http://www.apple.com/";
var $iframe = $('#ifrm');
if ( $iframe.length ) {
$iframe.attr('src',url);
return false;
}
return true;
}
and in HTML
<input type="button" onclick="print()" value="Test print"/>
<button onclick="change()">next</button>
<iframe id="printf" name="printf" src="dfgdf.html"></iframe>
here put your pages dynamically and get printed. use your logic to get print automatically or in single click or whatever
I came up with a way around it.
With this you get only one print dialogue box.
The aim is to get the contents of all the iframes into the parent window by manipulating the DOM using javascript.
Here is the code:
<script>
pages =[] // initiate an empty list here
function printPage() {
var frames = document.getElementsByTagName('iframe');
// get all the iframes and loop over them
// then push their innerHTML into the list
for (var i = 0; i < frames.length; i++){
pages.push(frames[i].contentWindow.document.body.innerHTML);
;
}
if (pages && pages.length) {
// this if statement, just checks to ensure our list is not empty before running the code.
// here is the magic, we now set the parent window to be equal to all the concatenated iframes innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
window.print();
}
else {
// do nothing
}
}
with this solution you even avoid the problem of the iframe being cut off if it exceeds one page.
Remember that in your parent page HTML you will have the code below to call the printPage function.
<input type="submit" value="Print All"
onclick="javascript:printPage()"
/>

Printing a web page using just url and without opening new window?

<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

Categories