Search code examples
pythonpdfbackground-imagewkhtmltopdfpdfkit

Background Image is not visible in pdf Wkhtmltopdf with python

I use Wkhtmltopdf library to create pdf from html files using python. Background image is not coming in the pdf. It's visible in html but not in pdf. I have tried giving image path from server also still not working.

wkhtmltopdf version - wkhtmltopdf 0.12.6 (with patched qt)

HTML -

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: "Poppins Regular", sans-serif;
    }

    html {
      min-height: 100% !important;
      height: 100%;
    }

    .page-banner-area {
      width: 100%;
      background: url("D:/Automation/images/network-tel.png") !important;
     /* background: url("http://localhost:8080/Automation/assets/images/equal.png") !important;*/

      background-repeat: no-repeat;
      height: 100%;
      background-size: cover;

    }
  </style>
  <title>TCMT</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
  <div class="page-banner-area">
    <div style="font-size: 50px;">Test BG Image</div>
  </div>
</body>
</html>

Python code -

import pdfkit
import sys

path_wkhtmltopdf = r'C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe'
config = pdfkit.configuration(wkhtmltopdf=path_wkhtmltopdf)
options = {
  "enable-local-file-access": None
}
argumentsLength = len(sys.argv) - 1
argumentList = sys.argv

print("This file is called with %i arguments" % (argumentsLength))
print(argumentList)
# remove first argument
argumentList.pop(0)
# argument list after removal of first element from list
print(argumentList)
lastItemInList = argumentList[-1]
print(lastItemInList)
del argumentList[-1]
pdfkit.from_file(
    argumentList, lastItemInList, configuration=config,options=options),

Command to create pdf = python ./<python_file.py> <html_file.html> test.pdf

Solution

  • If you are using Linux please check the ownership and permissions of the file. otherwise, you can use a direct static image web URL.

    I tested the below ode code and it resolved the background image perfectly.

    HTML

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: "Poppins Regular", sans-serif;
    }

    html {
      min-height: 100% !important;
      height: 100%;
    }

    .page-banner-area {
      width: 100%;
      background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/-127wiki.jpg/1200px--127wiki.jpg") !important;
     /* background: url("http://localhost:8080/Automation/assets/images/equal.png") !important;*/

      background-repeat: no-repeat;
      height: 100%;
      background-size: cover;

    }
  </style>
  <title>TCMT</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
  <div class="page-banner-area">
    <div style="font-size: 50px;">Test BG Image</div>
  </div>
</body>
</html>

    python

    import pdfkit
import sys

argumentsLength = len(sys.argv) - 1
argumentList = sys.argv
options = {
  "enable-local-file-access": None
}
print("This file is called with %i arguments" % (argumentsLength))
print(argumentList)
# remove first argument
argumentList.pop(0)
# argument list after removal of first element from list
print(argumentList)
lastItemInList = argumentList[-1]
print(lastItemInList)
del argumentList[-1]
pdfkit.from_file(
    argumentList, lastItemInList,options=options)

    I refactored the code a little to run on my own machine.

    commands

    python ./test2.py stackoverflow.html test.pdf

    command line outputs

    This file is called with 2 arguments
['./test2.py', 'stackoverflow.html', 'test.pdf']
['stackoverflow.html', 'test.pdf']
test.pdf
Loading page (1/2)
Printing pages (2/2)                                               
Done

    screenshot of generated pdf test.pdf

    Also, I had already set up pdfkit using this guide.