Convert HTML to PDF

JavaScript
1

Is it possible to convert an html page to a pdf document without a 3rd party application? I haven’t been able to find this - perhaps I am missing something in my search.

Thank you.

1 Like
2

If you have Windows 10, File-> Print to PDF

3

Thank you for that. I didn’t make myself clear - I was referring to a website from the server to convert a printable html page to pdf for the user to save. IE. Article you might have on your website and allow a user to save it as a pdf., not using the user’s browser to do that.

4

Sorry no - JavaScript doesn’t provide any way to do that.

1 Like
5

Thank you for that. I was pretty sure there wasn’t a way to do that but wanted to double check with an expert such as yourself. Thanks!

1 Like
6

I haven’t really tried it but this library might be worth a shot:

2 Likes
7

The question now for @javascript7 is, are you wanting this to work only on your own page, or for people to be able to use a JavaScript technique to save as PDF on any page?

8

Thanks, I will look into that and see how it works.

9

I only want it to work on one specific page. Are you saying by asking that question that it work be very difficult for multiple questions?

10

Yes. I’m glad that it’s for only one page, as that reduces potential problems for you.

11

Here’s the test copy that works just fine. It was pretty easy - not sure if I missed anything?? Any suggestions appreciated. Is it best to have the html2.pdf.js on the server or is it okay the way I have it, with using the bundle at the website?

<!DOCTYPE HTML>
<html>
  <head>
    <title>html2pdf Test - Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style type="text/css">
      /* Basic styling for root. */
      #root {
        width: 500px;
        height: 700px;
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <!-- Button to generate PDF. -->
    <button onclick="test()">Generate PDF</button>

    <!-- Div to capture. -->
    <div id="root">
      This is a test
    </div>

    <!-- Include html2pdf bundle. -->

    <script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>



    <script>
        function test() {
            // Get the element.
            var element = document.getElementById('root');

            // Generate the PDF.
            html2pdf().from(element).set({
                margin: 1,
                filename: 'test.pdf',
                html2canvas: { scale: 2 },
                jsPDF: { orientation: 'portrait', unit: 'in', format: 'letter', compressPDF: true }
            }).save();
        }
    </script>
  </body>
</html>
12

Well if you don’t host the file yourself I’d suggest to load it from a CDN instead (for example here)… loading raw files from git branches is okay for experimenting, but you can’t pin a specific version this way so the code might change any time.

1 Like
13

If there are updates, do they always change to a new version rather than updating the existing? I do host the site and I can host the version that works good. Would changes to updated versions be required based on browsers changing their versions?

14

Yes that’s the point of versioning. :-) You can check their releases to see what kind of updates have been published in the past.

No the browser versions are not related… if at all it’s the other way round, in that a library might introduce new features that won’t work in older browsers any more that were previously supported. By pinning a specific (minor) version you’re always safe though; JS libraries usually follow semantic versioning as explained here:

1 Like
15

Great! Thanks again for helping with a solution that I didn’t think was possible without a 3rd party software. You have helped me knock this one off my bucket list! Thank you again for your time and expertise.

1 Like
16

Glad I could help. :-)

1 Like
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.