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>