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

Question

I am trying to download a pdf out of a html and css file, the html/css page design and the pdf should be exactly same.

below is my javascipt!

function generatePDF2() {
    var doc = new jsPDF();

    var elementHTML = $("#contnet").html();
    var specialElementHandlers = {
      "#elementH": function(element, renderer) {
        return true;
      }
    };
    doc.fromHTML(elementHTML, 15, 15, {
      width: 170,
      elementHandlers: specialElementHandlers
    });

    // Save the PDF
    doc.save("sample-document.pdf");
  }

Html

 <div id="contnet">
  <!-- HTML contnet goes here -->
  <h1>Lorem Ipsum</h1>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dolor dolorum quos quaerat consequatur doloribus mollitia distinctio eius voluptate excepturi voluptatibus nihil officia, nam animi non perferendis, unde accusantium ut.
</div>

<div id="elementH"></div>

<button onclick="generatePDF2();">Generate2</button>

unfortunately this solution i found doesnt work!

these are the header i load

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

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

Answer 1

I think you are missing HTML2Canvas library (js file). download html2canvas.min.js and add it as

<script type="text/javascript" src="html2canvas.min.js"></script>

Answer 2

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..