I have a "print" button on index.html. What code do I need to print the print.html file? I mean, when I press the button from index.html, print the page print.html.
-
No load. I need to print external file by button.vladchooo– vladchooo2011-05-29 16:09:25 +00:00Commented May 29, 2011 at 16:09
Add a comment
|
3 Answers
function closePrint () {
document.body.removeChild(this.__container__);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.style.visibility = "hidden";
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
Then use
onclick="printPage('print_url');"
I think you're looking for window.print()
Update
Just noticed you've specified file names in there and that you want to print print.html when a button on index.html is clicked. There's no built-in way to do this (in the sense that you can't pass any arguments to window.print() indicating the document to print). What you could do is load the document to print into an iframe or open a new window and on load, invoke window.print() on that container.
Here are some forum posts and web pages that talk about the same thing:
- http://www.highdots.com/forums/javascript/printing-another-web-file-present-274201.html
- http://www.webmasterworld.com/javascript/3524974.htm
- http://www.felgall.com/jstip29.htm
Update 2
Here's some quick-and-dirty code - note that this will only work if both your pages are in the same domain. Additionally, Firefox seems to fire the load event for an empty iframe also - so the print dialog will be displayed immediately on load, even when no src value was set for the iframe.
index.html
<html>
<head>
<title>Index</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#loaderFrame').load(function(){
var w = (this.contentWindow || this.contentDocument.defaultView);
w.print();
});
$('#printerButton').click(function(){
$('#loaderFrame').attr('src', 'print.html');
});
});
</script>
<style>
#loaderFrame{
visibility: hidden;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<iframe id="loaderFrame" ></iframe>
</body>
</html>
print.html
<html>
<head>
<title>To Print</title>
</head>
<body>
Lorem Ipsum - this is print.html
</body>
</html>
Update 3
You might also want to see this: How do I print an IFrame from javascript in Safari/Chrome
4 Comments
vladchooo
Can you give code, because I'm new and... But I don't want the page to be visible... Just when I press the button on index.html the page print.html be printed...
no.good.at.coding
I don't think all browsers would allow that - it could be a security issue. I'm updating the answer, please check in a couple of minutes.
no.good.at.coding
As for making the content to be printed invisible, you could style the new window or the iFrame with CSS so that it's either hidden or of a very small size - note that a browser may have some restrictions about making windows smaller than a certain size. I'd suggest using an iFrame instead.
no.good.at.coding
@vladchooo I've updated my answer to add two simple HTML pages to demonstrate. I've used jQuery because it makes things a lot simpler. This works in FF4.0.1, Chrome 11 and IE 8. However, Firefox does have a problem that it will fire the load event even for an iframe with no
src set. You'll need to work around that. Let me know if this answers your question.You can use the JQuery printPage plugin (https://github.com/posabsolute/jQuery-printPage-plugin). This plugin works fine and you can simply print an external html page.
Example:
<html>
<head>
<title>Index</title>
<script src="http://www.position-absolute.com/creation/print/jquery.min.js" type="text/javascript"></script>
<script src="http://www.position-absolute.com/creation/print/jquery.printPage.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".btnPrint").printPage();
});
</script>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<p><a class="btnPrint" href='iframe.html'>Print!</a></p>
</body>
</html>
