Menu
I have a pdf associated with a button . When i click the button i want to get the pdf printed. This is how my button is coded :
<input type="submit" class="btn-red" value="Print"
name="Submit" id="printbtn"
onclick="printPDF('http://www.irs.gov/pub/irs-pdf/fw4.pdf')" />
Now my print functionality works like this :
function printPDF(pdfUrl)
{
if ((navigator.appName == 'Microsoft Internet Explorer') )
window.print(pdfUrl,"_self");
else
{
var w = window.open(pdfUrl,"_self");
w.print();
w.close();
}
}
The problem is , it's working fine in IE and Fire fox , but does not work in chrome. In ie and Firefox, it opens up the xps printer option, but in chrome , it just opens up a new print window, with the print preview of the div and not the pdf . But i want the xps option to be opened up here.
EDIT : In chrome when i try to print , only the html element comes as preview and not the pdf. I am using chrome version : 20.0.1132.57
How can i get around this peculiarity ? kindly help .
265
This worked for me and didn't require a host HTML file. The key was to wait for onload:
For a link like this:
<a class="print-pdf-link" href="/your/pdf.pdf">Print PDF</a>
I used javascript:
$('a.print-pdf-link').click(function () {
var w = window.open($(this).attr('href'));
w.onload = function () {
w.print();
};
return false;
});
I had to do the same thing and I used a different approach, one that for me worked in both Chrome and Firefox.
My solution involved a print.html helper file, that received the PDF file's url as a GET type parameter, then loaded the pdf inside an iframe. Then it kept checking to see if the pdf had completely loaded (binding the check to the onload event did not work) and on completion it triggered the print method.
Here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Print Page</title>
<meta name="title" content="Print" />
<script>
(function (window, document, undefined) {
var printy = {
urlGET: function (param) {
var params = document.URL.split('?');
if(params.length > 1) {
params = params[1].split('&');
for (var i = 0, len = params.length; i < len; i++) {
if (params[i].split('=')[0] === param) {
return params[i].split('=')[1];
}
}
}
return null;
},
init: function () {
var self = this;
window.onload = function () {
var src = self.urlGET('path');
//creating an iframe element
var ifr = document.createElement('iframe');
document.body.appendChild(ifr);
// making the iframe fill the viewport
ifr.width = '100%';
ifr.height = window.innerHeight;
// continuously checking to see if the pdf file has been loaded
self.interval = setInterval(function () {
if (ifr.contentDocument.readyState === 'complete') {
clearInterval(self.interval);
// doing the actual printing
ifr.contentWindow.print();
}
}, 100);
ifr.src = src;
}
}
}
printy.init();
})(window, document, undefined);
</script>
</head>
<body>
</body>
</html>
This solution is not tested on IE though. We use Macs at work so it was not an option.
In order to do the printing, I use it by calling an URL like this: http://example.com/print.html?path=docs/myfile.pdf
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
