0

I have some html which includes four pictures in a 2x2 row/col style: Picture of html output

I want to convert this into a PDF - trying this with the following lines of code:

options = {"enable-local-file-access": None}
config = pdfkit.configuration(wkhtmltopdf=path_wkhtmltopdf)
pdfkit.from_file(path_IN,path_OUT, configuration=config,options=options)

produces the following pdf output: Picture of pdf file output

Does anyone know how I can output a PDF that has the same look as the HTML code has?

Currently, I am generating my 2x2 structure by calling the following HTML code

    <div class = "row_container">
    <div class = "row">
    <p class="caption">Figure 1: Real yield vs. Duration</p>
    <img src="IL_fig1.png"  width = "{width}" height = "{height}">
    </div>
    <div class = "row">
    <p class="caption">Figure 3: Inflation</p>
    <img src="IL_fig3.png"  width = "{width}" height = "{height}">
    </div>
    </div>
    <div class = "row_container">
    <div class = "row">
    <p class="caption">Figure 2: Break-even-inflation vs. Duration</p>
    <!--<p>BEI, seasonal adjustment</p>-->
    <img src="IL_fig2.png"  width = "{width}" height = "{height}">
    </div>
    <div class = "row">
    <p class="caption">Figure 4: Break-even-inflation, 10Y inflation-linked bonds</p>
    <img src="IL_fig4.png"  width = "{width}" height = "{height}">
    </div>
    </div>

Together with some CSS styling:

.row_container {

  display: flex;
  justify-content: space-between;
  -webkit-box-pack: center;
  overflow: hidden;
  padding: 0px 3px 0px 3px;
}
.row {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  /*flex: 1;*/
}

I have tried to scale the pictures, but this did not help either.:

pdf output with scaled images

I would like to have 2 pictures side by side in 2 rows as in the output from the HTML.

Appreciate the help.

Spedtsberg
  • 45
  • 1
  • 7
  • you probably need to downscale the images in your html... try to set their `width` to some small value and see how it changes in the PDF output – L. Letovanec Jul 21 '22 at 13:28
  • Thanks for the quick response. I did try that and it did not seem to alleviate the problem. Here, I've tried to scale it but I still cannot get the pictures to stand side by side as in the picture from the HTML output. Please see the updated post where I have included a picture with pictures scaled. – Spedtsberg Jul 21 '22 at 13:33
  • what css rules are you using to create 2x2 grid in html? i know that some time back i had a problem that not all css rules worked in wkhtmltopdf, maybe try a different approach to create such grid – L. Letovanec Jul 21 '22 at 13:36
  • Updated the question above, to show the underlying HTML and CSS code. Do you have any suggestions considering the above code? – Spedtsberg Jul 21 '22 at 13:55
  • This post might help you https://stackoverflow.com/questions/57020675/using-flex-css-with-wkhtmltopdf . You are probably missing `display: -webkit-box;` – L. Letovanec Jul 21 '22 at 14:01
  • Appreciate the suggestions above. However, using display: -webkit-box; does not solve the problem. – Spedtsberg Jul 22 '22 at 09:58

0 Answers0