Consider a static HTML page as test.html, and a printable version of the page has been stored in test.pdf. How can I guide browser to load and print test.pdf instead of test.html when visitors tell their browser to print?

If it's not possible how can I introduce a print button (using JavaScript) within the HTML page to do so?

Consider a static HTML page as test.html, and a printable version of the page has been stored in test.pdf. How can I guide browser to load and print test.pdf instead of test.html when visitors tell their browser to print?

If it's not possible how can I introduce a print button (using JavaScript) within the HTML page to do so?

• javascript
• html
• printing

• You can do this via PHP. Not JS. webdesign.about.com/od/php/ht/force_download.htm In JS, you've already sent the file headers, so you can't do exotic stuff like this. – Manishearth Commented Mar 12, 2012 at 14:55
• 2 1. This will download the file, not print; 2. Even if loading the pdf, it will open it not print. – Googlebot Commented Mar 12, 2012 at 15:10
• Oops I misread the question. One thing that may work (dunno) is loading the pdf in an iframe and calling the iframe's print. But I'm not sure how much DOM is preserved. – Manishearth Commented Mar 12, 2012 at 15:14
• I’m confused, are you using a print friendly CSS or a pre-made PDF file? because these are very different things. – David Hellsing Commented Mar 12, 2012 at 15:29
• @Ali, I've rolled back your edit. You cannot change a question entirely after answers have already been provided. Requesting a CSS solution to customize what's printed is totally different than opening a PDF when printing. Please create a new question if you have changed your requirements. – James Hill Commented Mar 12, 2012 at 15:53

3 Answers 3

You cannot force the browser to print a different file than the user is requesting/viewing. That would be a security nightmare!

Option 1 (JS (as requested) & HTML)

I suggest creating a printable version link on your site that will direct the user to the .pdf (opening the PDF in a new window would be preferable).

<!-- JS -->
<script type="text/javascript">
    function LoadPrintableVersion() {
        window.open("Test.pdf");
    }
</script>

<!-- HTML -->
<span id="spanPrintableVersion" onclick="LoadPrintableVersion()">
    Printable Version
</span>

Option 2 (pure html)

<a href="test.pdf" target="_blank">Printable Version</a>

You can’t hijack the print command in the browser, but you can hijack keyboard shortcuts (although I wouldn’t recommend it) so that when the user prints using ctrl/cmd + p, it redirects to a PDF (or does something else). This is a usability minefield though, you should probably just create a big link that says "Printable version" and link it to the PDF (or a version of the page that uses a print-friendly CSS).

Another good options is to simply define some rules for the print media type in your CSS file, then the browsers will apply those when the user prints, without any hacks or javascript at all.

But since you asked I created a small shortcut hijacking script for the print command. It‘s kind of tricky because of the mac command key, but something like:

var cmd = false;

$(document).on('keydown', function(e) {

    if(detectMacCommand(e.which)) {
        cmd = true;
        return;
    }

    // now detect print (ctr/cmd + p)
    if ( e.which == 80 && ( e.ctrl || cmd ) ) {
        e.preventDefault();
        alert('redirect to PDF');
    }

}).on('keyup', function(e) {

    if(detectMacCommand(e.which)) {
        cmd = false;
        return;
    }

});

function detectMacCommand(key) {
    return ( $.browser.mozilla && key == 224 ||
             $.browser.opera   && key == 17 ||
             $.browser.webkit  && ( key == 91 || key == 93 ));
}
​

That’s pretty cool, but don’t use it :)

Here is the way the W3C says you should:

<LINK REL="alternate" HREF="/path/to/PDFVersion.pdf" TYPE="application/pdf" MEDIA="print" TITLE="PDF version" />

Mind you, as far as I can tell, no browser currently supports this. Sorry.