2

Does anyone know of an HTML to PDF converter for either Flask or Javascript/Jquery that works with Bootstrap CSS?

I've tried PDFkit but I haven't gotten it the work with Bootstrap. Instead of displaying multiple columns in the Bootstrap grid, it places everything to the left as if it is ignoring the Bootstrap styling.

Here is what I have tried:

@app.route('/test')
def test():
    config = pdfkit.configuration(wkhtmltopdf="C:\\Program Files\\wkhtmltopdf\\bin\\wkhtmltopdf.exe")
    report = render_template('test.html')    
    pdf = pdfkit.from_string(report, False, configuration=config)    
    response = make_response(pdf)
    response.headers['Content-Type'] = 'application/pdf'
    response.headers['Content-Disposition'] = 'inline; filename = report.pdf'    
    return response

And the HTML. I borrowed this from the Bootstrap website for a minimal example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--<link rel="stylesheet" href="static/css/bootstrap.min.css"> -->
  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</head>
<body>

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>
Mike C.
  • 1,761
  • 2
  • 22
  • 46

1 Answers1

0

The page needs some rendering. You can use PDFKit!

https://pypi.python.org/pypi/pdfkit

https://github.com/JazzCore/python-pdfkit

import pdfkit

pdfkit.from_url('http://google.com', 'out.pdf')
pdfkit.from_file('test.html', 'out.pdf')
pdfkit.from_string('Hello!', 'out.pdf')  # Is your requirement?
Anthony
  • 23
  • 1
  • 7
  • Thanks. I am rendering the template with Flask so the the template is a string. I have no problem getting a PDF. It's that the Bootstrap CSS styling isn't present when the PDF is rendered. – Mike C. Jan 16 '20 at 15:38
  • Oh okay I gotcha! Sorry, I misunderstood what you were trying to get help with. My bad. – Anthony Jan 17 '20 at 15:09
  • @Anthony_Meklaus No problem. I'm a noob at html/Javascript. I finally figured out to create a pdf the user could simply print. No conversion necessary. – Mike C. Jan 17 '20 at 15:11
  • Great!! I'm so glad you were able to figure it out!! – Anthony Jan 17 '20 at 15:24
  • 1
    @MikeC. Hi, I am facing the same problem as you are. How did you end up creating a PDF? – callmeanythingyouwant Jan 27 '22 at 10:33
  • @callmeanythingyouwant i think he stopped using python to generate the printed page and instead used the browsers print function. I am currently facing this same issue as well. I have noticed that it does seem to load bootstrap and use some classes but the problematic ones seems to be grid related.. Let me know if you find a solution. – Nexeh Jan 27 '22 at 15:42
  • 1
    @Nexeh I did manage to make it work. Turns out I was using an older version of bootstrap which was working as intended for the html webpage, but not for the PDF. I am now using [this](https://getbootstrap.com/docs/5.1/layout/grid/) and it works just fine. I was relying upon automatic change of row after using 12 columns, but the correct way is to change the row yourself by specifying a new `div` element. – callmeanythingyouwant Jan 28 '22 at 10:34