html – pdfkit生成小规模的pdf

前端之家收集整理的这篇文章主要介绍了html – pdfkit生成小规模的pdf前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用pdfkit从html字符串生成pdf,由我的Django视图呈现.

出于某种原因,输出pdf很小.
我的pdfkit选项字典是 –

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

输出文件here
HTML代码是 –

<!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>

解决方法

问题是关于为pdfkit设置dpi参数.

因此,如果遇到同样的问题,只需根据需要设置dpi即可.对我来说,这就是我所需要的

options = {
            'page-size': 'A4','dpi': 400
        }
原文链接:https://www.f2er.com/html/225218.html

猜你在找的HTML相关文章