How can I force the browser to print a PDF version of a webpage?

Question

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?

Answer 1

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>

Answer 2

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 :)

Answer 3

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.