All geek questions in one place

Pdfkit creates small scaled pdf files

I use pdfkit to create pdf files from the html lines displayed in Django views.

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

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 -

 <!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 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>
+6
source share
3 answers

The problem was setting the dpi parameter for pdfkit.

So, if you are faced with the same problem, just configure the dpi to suit your needs. For me, this is what I needed

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

I had the same problem. I just changed the default configuration:

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

you can try to disable compression via options as shown below

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

Source: https://habr.com/ru/post/1263548/

More articles:


All Articles