How to Add HTML and CSS into Pdf

How Can I add HTML And CSS Into PDF

Important:
Please note that this answer was written in 2009 and it might not be the most cost-effective solution today in 2019. Online alternatives are better today at this than they were back then.

Here are some online services that you can use:

PDFShift
Restpack
PDF Layer
DocRaptor
HTMLPDFAPI
HTML to PDF Rocket

Have a look at PrinceXML.

It's definitely the best HTML/CSS to PDF converter out there, although it's not free (But hey, your programming might not be free either, so if it saves you 10 hours of work, you're home free (since you also need to take into account that the alternative solutions will require you to setup a dedicated server with the right software)

Oh yeah, did I mention that this is the first (and probably only) HTML2PDF solution that does full ACID2 ?

PrinceXML Samples

Converting Html Css to Pdf and Download it, Same as the Design

Couldn't find a solution for this question.. but found an alternative..

below is the html body

<div class="container">
  <h3>PDF converter</h3>

  <button id="download" class="btn btn-success mb-4">Download</button>

  <div style="background-color:white;" id="first-page">
    <div class="container border p-4">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint iusto
        nam minus consequatur vitae fugit, tenetur reprehenderit officiis
        deserunt quibusdam id adipisci delectus dolorum eveniet expedita
        dolores culpa excepturi voluptatem.
      </p>
    </div>
  </div>
</div>

this is the javascript i used to get the pdf same as the design..

<script>
  $("#download").click(function() {
    var pdf = new jsPDF("a", "mm", "a4");
    var firstPage;
    var secondPage;

    html2canvas($("#first-page"), {
      onrendered: function(canvas) {
        firstPage = canvas.toDataURL("image/jpeg", 1.0);
      }
    });

    setTimeout(function() {
      pdf.addImage(firstPage, "JPEG", 5, 5, 200, 220);
      pdf.save("export1.pdf");
    }, 150);
  });
</script>

and these are the header i used .. this include the bootstrap headers as well

<!-- bootstrap style-->
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

<!-- bootstrap js -->
<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
  crossorigin="anonymous"
></script>
<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
  crossorigin="anonymous"
></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

This is closest i found when downloading your html & css as a pdf file ... not perfect but works ..

Generating pdf from external html file and css

As the documentation says the addHtml method is deprecated ( http://raw.githack.com/MrRio/jsPDF/master/docs/global.html#addHTML), so i played a bit with your example and if you updated your code like this it works. You still have to work a bit to fix the width of div in the pdf.

<!DOCTYPE html>
        <html>
            <head>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
                <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
            </head>
            <body>
                <div id="capture" style="padding: 10px; background: #f5da55;">
                        <h4 style="color: #000; ">Hello world!</h4>
                </div>
            </body>
            <script type="text/javascript">
                function savePDF(data) {
                    let pdf = new jsPDF('p','pt','a4');
                    pdf.html(data, {
                       callback: function (doc) {
                         doc.save("test.pdf");
                       }
                    });
                } 
                savePDF(document.body.innerHTML)
            </script>
        </html>

Export CSS-styled HTML to PDF

Everything is working as expected.

For redability, html to pdf ignores background images and defaults the text color to system color (which is usually black). Why? Because in most cases it does more good than harm. Web graphics can use a wide array of graphic techniques and not all are compatible with print (in the sense it might come out looking bad, being hard to read and it might also be heavier on ink cartridges). Most people printing a web page are interested in the text and its readability, not in the fancy graphics.

So, when trying to Print (Ctrl + P) your CV directly from the SO snippet you placed in your question, by default, Chrome ignored background graphics. After I opened advanced settings and checked "Background graphics" it looked as you want it to:

enter image description here

I have no idea how to enable background graphics in whatever library you're trying to use, but I can assure you most (if not all) have a setting for it that's turned off by default.

All you need to do is find the setting in your library's docs and turn it on.

Can you embed an HTML webpage in a PDF file?

The answer is no.
While you can embed videos, sounds and SWF files in a PDF, dynamic HTML files aren't supported. (Adobe AIR is more suitable to package and distribute HTML files).

The best you can do in a PDF is to use the ATTACH option in Adobe Acrobat. This will "attach" any file with the PDF document similar to how you add an attachment with an email. But the attachment can't be viewed within the PDF document, and has to be opened separately.

More info:

Javascript can be added to PDF files and used to manipulate various elements within the PDF file.