WKhtmltopdf renders pdf different than html page

2
votes

I have a simple webpage, using bootstrap for css. I want to export the page to pdf, using wkhtmltopdf, but some css styles are completely ignored, but others not.

Here's my code:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href='file:///C:/Users/luna/Desktop/pdftemp/css/bootstrap.css' rel="stylesheet">
  <title>
     PDF Template
  </title>
</head>
<body>
  <div class="panel panel-success">
    <div class="panel-heading">
      <h4 class="panel-title">Basic Details</h4>
    </div>
  <div class="panel-body">
     <div style="margin-right: -15px; margin-left: -15px;">
        <div class="col-lg-4">          
            Experiment Name: <br> 
            TestExp 
            Date: <br>
            24.05.2015  
        </div>
        <div class="col-lg-4">      
           Experiment Name: <br> 
           Test<br>
           Date: <br>
            24.05.2015
        </div>
    </div>      
 </div>
</body>

Browser View: Browser Output

PDF:

PDF Output

I want to achieve, that the pdf is same like the browser output. What am I doing wrong ?

1
htmlcsspdftwitter-bootstrap-3wkhtmltopdf
You're probably encountering getbootstrap.com/getting-started/#support-printing – cvrebert
I tried the suggestion, mentioned in your link. But its not working, the pdf output is still the same like above – lunatikz
solved :) I achieve now the same output as in browser, by wrapping the divs in table environment. Thanks cvrebert, your link provided useful information. – lunatikz
Could you please post your comment as an answer? – z--

1 Answers

0
votes

You need to change view port size -

Setting page.viewportSize = { width: 1280, height: 1024 } results in a "what is my screen resolution" of 1280 x 800.