Login/Register
Module that converts HTML to PDF module compatible with Bootstrap and Flask
Asked Answered
pythoncsstwitter-bootstrapflaskpdfkit
S

2

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>
Shillelagh answered 16/1, 2020 at 15:15 Comment(0)
H
0

I faced the same problem but the following helped. A separate stylesheet for print preview will be applied. Replace print with all if you want the stylesheet to work for both screen and print.

<link rel="stylesheet" href="static/css/bootstrap.min.css" media="print">

A reference to the answer: https://www.w3schools.com/css/css3_mediaqueries.asp

Hymie answered 8/1 at 12:48 Comment(0)
D
-1

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?
Dekow answered 16/1, 2020 at 15:18 Comment(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. – Shillelagh
Oh okay I gotcha! Sorry, I misunderstood what you were trying to get help with. My bad. – Dekow
@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. – Shillelagh
Great!! I'm so glad you were able to figure it out!! – Dekow
@MikeC. Hi, I am facing the same problem as you are. How did you end up creating a PDF? – Affinitive
@Affinitive 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. – Guilder
@Guilder 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 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. – Affinitive

© 2022 - 2024 — McMap. All rights reserved.