Python pdfkit css styling issues

Question

I'm trying to a generate a PDF document from HTML template. Whenever I try to create a 3*3 layout, the CSS styling get messed up in PDF but in browser it works fine. Do I have to change anything pdfkit to make it work. Somehow I have managed to create a desired template that is correctly generating but what if I have to create a complex CSS styling then it will surely gets messed up. Below I'll paste the modified working HTML template and python function to generate the PDF. Please guide me on how to make CSS styling works exactly like in browser in PDF also. I have tried weasyprint and xhtml2pdf also they do the same thing but with minor difference.

#HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.container{
  display:  flex;
  justify-content: center;
}


h2{
  display: -webkit-box; /* wkhtmltopdf uses this one */
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center; /* wkhtmltopdf uses this one */
  -webkit-justify-content: center;
          justify-content: center;

          
 
}

.column {
  float: left;
  width: 250px;
  padding: 10px;
  height: auto;
  margin: 8px;
  border: 1px solid;
}

/* Clear floats after every third column */
.column:nth-child(3n+1) {
  clear: both;
}

.cols-image img {
  width: 100%;
  height: auto;

}

h3 {
  font-size: 14px;
  text-align: center;

}

.table-container {
  display: -webkit-box; /* wkhtmltopdf uses this one */
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify; /* wkhtmltopdf uses this one */
    -webkit-justify-content: space-between;
            justify-content: space-between;
  margin-top: 10px;
}

table {
  border: 0;
  width: 40%;
  font-size: 10px;
}

table td,
table th {
  padding: 5px;

  text-align: left;
}

table th {
  padding: 5px;
  text-align: left;
}

</style>
</head>
<body>
  <div id="logo" style="text-align: right;">
    <img src="file:///home/jackson/Poisecode-projects/project_catalog/app/src/application/templates/logo.png" alt="Logo" style="max-width: 80px; max-height: 80px;">
</div>
    <h2>GOLDIAM PRODUCTS</h2> 

  <div class="container">
    <div class="row">
      {% for item in data %}
      <div class="column" >
        <div class="cols-image">
          <img src="https://m.media-amazon.com/images/I/81qyWFH1lWL._AC_UY1100_.jpg" alt="col 1 img">
        </div>
        <h3>{{item.sku}}</h3>
        <div class="table-container">
          <table>
            <tr>
              <th>Size:</th>
              <td>1.2g</td>
            </tr>
            <tr>
              <th>Weight:</th>
              <td>1g</td>
            </tr>
            <tr>
              <th>Diawt:</th>
              <td>5g</td>
            </tr>
       
          </table>

          <table>
            <tr>
              <th>MT WT:</th>
              <td>3g</td>
            </tr>
            <tr>
              <th>GT WR:</th>
              <td>10g</td>
            </tr>
            <tr>
              <th>Net WT:</th>
              <td>10g</td>
            </tr>
          </table>
        </div>
      </div>
      {% endfor %}

    </div>
  </div>

</body>
</html>

As you can see I have made some changes to make it work in PDF.

#python function

def export_products_to_pdf(self, data):
        products = []

        for item in data:
            variant_list = []
            for variant in item['variants']:
                url = None
                if variant['color'] == 'white-gold':
                    url = self.get_product_media(variant['image_path'])
        
                variant_dict = {
                    "color": variant['color'],
                    "image_url": url 
                        }
                variant_list.append(variant_dict)
            product_dict = {
                "sku": item['sku'],
                "gold_wt": item['gross_weight'],
                "shape": item['center_shape'],
                "size": item['center_stone'],
                "diamond_wt": item['diamond_weight'],
                "variants": variant_list

            }
            products.append(product_dict)
        print(products)
                    # processed_variant_ids.add(variant['_id'])
        jinja_template = Environment(loader=FileSystemLoader(app.config['HTML_TEMPLATE_PATH']))
        template = jinja_template.get_template('product_pdf.html')
        variable_dict = {'data': products}  
        html = template.render(variable_dict)
        options = {
            "enable-local-file-access": "",
            'page-size': 'A4',
            'margin-left': '20mm',
        }
        pdf_data = pdfkit.from_string(html, False, options=options)
        pdf_file = io.BytesIO()
        pdf_file.write(pdf_data)
        pdf_file.seek(0)
        return pdf_file

please help me on getting the correct CSS output when generating PDF.

Python pdfkit css styling issues

0 Answers0