11

I am trying to put together a pdf from html template code. The problem I am running into is that the html-pdf converters I have tried don't format the css properly, I guess they are not yet compatible with css flex-box.

I have looked at two approaches:

  1. Using html-pdf package on Node.js

  2. Using jinja2, pdfkit and wkhtmltopdf in python

Both approaches allow me to template the html and dynamically build a pdf from html but the css conversion does not 100% work (css flex-box fails).

Any ideas on html to pdf converters that can handle css flex-box? Or, does anyone know of any fixes for the approaches above so they can handle css flex-box? Just want to make a pdf from css flex-box styled html.

Thanks!

JustAnotherJohnDoe
  • 167
  • 8
  • Can you please post your HTML code, and a screen shot of the results you get when processing that code through the various converters you have tried? That way we can test whether a solution we can think of is better than what you have already. – Brett Donald Jul 10 '22 at 23:39
  • There are a [bunch of Node packages](https://npm.io/search/keyword:html-to-pdf) for html-to-pdf conversion. – Brett Donald Jul 10 '22 at 23:41

2 Answers2

0

You can use jsPDF along with html 2 canvas.

HTML2canvas takes sreenshots of a element an js pdf downloads them.

I found in the html2canvas library it supports flex.

Here is an example(without using flex);

function savetopdf(){
    var HTML_Width = $(".result").width();
    var HTML_Height = $(".result").height();
    var top_left_margin = 5;
    var PDF_Width = HTML_Width + (top_left_margin * 2);
    var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas($(".result")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        }

        pdf.save("aswinwriter.pdf");
        
        
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="result" class="result">
Example
</div>
<button onclick="savetopdf()">TRY IT </button>
Aswin
  • 43
  • 6
0

I use pdfkit with python and found the same problem. I could solve it using this page. The page adds prefixes to the CSS and makes it compatible with old versions.

Alvaro
  • 59
  • 5