pdfkit generates small scaled pdfs

Question

I am using pdfkit in order to generate pdfs from html strings, rendered by my Django's views.

For some reason, the output pdf is small. My pdfkit option dictionary is -

options = {
            'quiet': '',
            'page-size': 'A4',
            'margin-top': '0.75in',
            'margin-right': '0.75in',
            'margin-bottom': '0.75in',
            'margin-left': '0.75in',
            'disable-smart-shrinking': ''
        }

and the output file is here

Html code is -

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="pdfkit-orientation" content="Portrait"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Dribble</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet">
    <!-- Custom Font -->
    <style>
        body {
            font-family: 'Open Sans', sans-serif;

        }

        p, a {
            color: #002f54;
        }

        .nav {
            background: #002f54;
            color: #FFFFFF;
            border-radius: 5px;
        }

        .ico {
            padding-right: 5px;
            top: 3px;
        }

        .nav > li p {
            text-align: center;
            font-size: 36px;
            font-weight: 800;
        }

        .right-align {
            float: right;
        }

        .pad-mar {
            font-size: 18px;
            padding-top: 10px;
            padding-bottom: 10px;
            margin-left: 30px !important;
            margin-right: 30px;
        }

        .pad-mar-middle {
            font-size: 18px;
            padding-top: 78px;
            padding-bottom: 25px;
            margin-left: 30px !important;
            margin-right: 30px;
        }

        .pad-mar-bottom {
            font-size: 18px;
            padding-top: 10px;
            padding-bottom: 90px;
            margin-left: 30px !important;
            margin-right: 30px;
        }

        .pad-mar-footer {
            padding-top: 20px;
            margin-left: 30px !important;
            margin-right: 30px;
        }

        .bor-bottom {
            border-bottom: 2px solid #ccc;
        }

        .no-pad {
            padding-left: 0;
        }

        .section {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .bold {
            font-weight: 700;
            color: #002f54;
        }

        .small {
            font-size: 14px;
        }

        .bolder {
            color: #002f54;
            font-weight: 800;
            font-size: 22px;
        }

        .normal {
            color: #002f54;
            font-weight: 700;
        }

        .smaller {
            font-size: 14px;
            font-weight: 700;
        }

        h3 .bold {
            margin-top: 0;
        }

        .neg-mar {
            margin-top: -25px;
        }

        .cus-img {
            max-width: 85px;
            margin-bottom: 10px;
        }

        .nav-stacked.mob > li {
            font-size: 16px;
            margin-left: 0px !important;
            margin-right: 0px;
            margin-bottom: 10px;
            padding-top: 5px;
            border: 1px solid #EB6C6D;
            border-radius: 5px;
            font-weight: 300;
            text-align: center;
            color: #EB6C6D;
        }

        .nav-stacked.mob > li p {
            color: #002f54;
        }

        .nav.mob {
            background: #FFFFFF;
        }

        .pad-mar-bottom.mob {
            margin-left: 0px !important;
            padding-bottom: 10px;
        }

        .pad-mar-footer.mob {
            margin-left: 0px !important;
            text-align: center;
            padding-top: 10px;
        }

        .l-mar {
            margin-left: 40px;
        }

        .titl {
            color: #EB6C6D;
            font-size: 16px;
        }

        .bot-mar {
            margin-bottom: 20px;
        }

        .container {
            max-width: 575px;
        }
    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<section class="section">
    <div class="container">

        <div class="row bor-bottom bot-mar">
            <div class="col-xs-6 ">
                <img src="https://api.figo.me/assets/images/accounts/north_channel_bank_144.png"
                     class="img-responsive cus-img"/>
                <p> Commerzbank Service-BZ</p>
                <p>First line</p>
            </div>
            <div class="col-xs-6">
                <div class="right-align neg-mar">
                    <h3 class="bold">First line</h3>
                    <p class="bold">First line</p>
                    <p class="bold">First line</p>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="">
                <ul class="nav nav-stacked mob">
                    <li><span class="glyphicon glyphicon glyphicon-user ico"></span>From<p>Rewe GmbH</p></li>
                    <li><span class="glyphicon glyphicon glyphicon-credit-card ico"></span>Amount<p>$ 32,10 USD</p></li>
                    <li><span class="glyphicon glyphicon glyphicon-calendar ico"></span>Payment Date<p>Nov 5, 2017</p>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row pad-mar-bottom mob bor-bottom">
            <p class="titl"><span class="glyphicon glyphicon-tag ico"></span>Payment Reference</p>
            <div class="l-mar">
                <p class="normal">Hello Ennio,</p>
                <p class="normal">You sent a payment of <span class="bolder">$20.00 USD</span> to Dribble. (<a
                        href="mailto:paypal@dribble.com">paypal@dribble.com</a>)</p>
                <div class="no-pad">
                    <p class="smaller">It may take a few moments for this transaction to appear in your account.</p>
                </div>
            </div>
        </div>
        <footer>
            <div class="row pad-mar-footer mob">
                <a class="smaller" href="#">This document was automatically generated by Koryo</a>
            </div>
        </footer>
    </div><!-- Container -->
</section>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

https://stackoverflow.com/a/46034207/1635700 with python code — Tejas Tank, Sep 14 '17 at 05:34

score 16 · Accepted Answer · answered Jan 29 '17 at 18:19

16

The problem was about setting the dpi parameter for pdfkit.

So if you encounter the same problem, just set the dpi according to your need. For me, this what I was needed

options = {
            'page-size': 'A4',
            'dpi': 400
        }

answered Jan 29 '17 at 18:19

Sahar

436
1
4
15

1

This got me on track! I ended up needing to set :print_media_type => true as well. – bkunzi01 Mar 18 '17 at 18:23

score 2 · Answer 2 · answered Apr 01 '17 at 17:45

2

I had this same issue. I just changed the default configuration:

PDFKit.configure do |config|
    config.default_options = {
        page_size: 'A4',
        print_media_type: true,
        dpi: 400
    }
end

answered Apr 01 '17 at 17:45

Bruno Paulino

5,611
1
41
40

score 2 · Answer 3 · answered May 21 '19 at 07:38

2

you can try to disable shrinking through the options as below

options = { 'disable-smart-shrinking': ''}

answered May 21 '19 at 07:38

Hiran

1,102
11
18

pdfkit generates small scaled pdfs

3 Answers3