HTML to PDF with CSS included

Question

I'm searching for a way to convert my page to a PDF document by using jsPDF, but for now I cannot convert any CSS styling. It's just text and no graphics.

This is the code I'm using at the moment

    var specialElementHandlers = {
        '#ignorePDF': function (element,renderer) {
            return true;
        }
    };

    var doc = new jsPDF();

    doc.fromHTML($('#page-with-images').get(0), 20, 20, {'width': 500, 'elementHandlers': specialElementHandlers,});
    doc.save("Test.pdf");

But the result is not what I want, because there is no styling included. How do I fix this problem?

You need to apply specific css styling for the pdf.

Endre Simo
– Endre Simo

2016-07-04 12:54:34 +00:00
Commented Jul 4, 2016 at 12:54 — Endre Simo
– Endre Simo, Commented Jul 4, 2016 at 12:54

Jorrex · Accepted Answer · 2016-07-04 13:18:13Z

0

Try this.

var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($("#content"), function() {
  var output = pdf.output("datauristring");
  alert(output);
  //pdf.output("datauri"); //This will output the PDF in a new window
});

div {
  width: 100%;
  background-color: lightblue;
  padding: 15px;
  border: 2px solid black;
}

p {
  background-color: limegreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

<body>
  <div id="content">
    <div>
      <div>
        <div>
          <div>
            <p id="to-pdf">HTML content...</p>  
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

answered Jul 4, 2016 at 13:18

Jorrex

1,5003 gold badges13 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zhihar Over a year ago

in pdf document only visible elements (screen height - 1000px, but element height - 2000px (with scrolling))

Jorrex Over a year ago

I never really went as deep as that with jsPDF, I just gave you the code to create a PDF from HTML incl. CSS. I guess you should check out their docs, maybe that'll give you a lead.

Collectives™ on Stack Overflow

HTML to PDF with CSS included

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related