简体   繁体   中英

How to set html file converted from html to PDF using weasyprint to 100% of page width and height

Code I'm using for PDF generation:

html = HTML(string=final_html, base_url=request.build_absolute_uri())
main_doc = html.render()
pdf = main_doc.write_pdf()

This is the content of final_html string:

<body style="width:100%; height:100%;">
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
        }

        table {
            margin-top: 0px;
        }

        th, td {
            padding: 5px;
        }

        .bottom {
            vertical-align: bottom;
        }

        tr.noBorder td {
            border: 0;
        }
    </style> <table style="width:100%; height:100%;">
    <tr>
        <td COLSPAN="2" style="border-right-style: hidden;">
            <div style="float: left; display:inline;">
                <div>
                    <div><strong>-seller_name-</strong></div>
                </div>
            </div>
        </td>

        <td COLSPAN=2>
            <div style="float: right; display:inline;">
                <div style="text-align: center">
                    <strong>-label_name-</strong>
                </div>
                <div>
                    -crnbarcodeimage-
                </div>
                <div style="text-align: center">
                    <strong>*-label_number-*</strong>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td COLSPAN=2>Name & Delivery Address</td>
        <td style="border-right-style: hidden;">Payment Mode</td>
        <td style="float: right; border-left-style: hidden; border-top-style: hidden; border-bottom-style: hidden;">
            <strong>-order_type-</strong></td>
    </tr>
    <tr>
        <td COLSPAN=2>
            <div><strong>-drop_name-</strong></div>
            <br>
            <div>-drop_address-</div>
            <br>
            <div>-drop_state- <strong>-drop_pincode-</strong></div>
            <br>
            <div><strong>Contact Number: -drop_phone-</strong></div>
        </td>
        <td valign="top" COLSPAN=2>
            <div style="float: left;">
                <strong>Order No.:</strong>
            </div>
            <div style="float: right;">
                -seller_order_id-
            </div>

            <div>
                <div>
                    -seller_order_id_barcode-
                </div>
            </div>

            <div style="float: left;">
                <strong>Invoice No.</strong>
            </div>
            <div style="float: right;">
                -invoice_number-
            </div>
        </td>
    </tr>

    <tr>
        <td COLSPAN=4 ALIGN=RIGHT>
        </td>
    </tr>
    <tr>
        <td>Description</td>
        <td>QTY</td>
        <td>Rate</td>
        <td>Amount</td>
    </tr>
    <tr>
        <td>-item-</td>
        <td>1</td>
        <td>-invoice_value-</td>
        <td>-invoice_value-</td>
    </tr>
    <tr>
        <td COLSPAN=3 ALIGN=LEFT style="border-right-style:hidden;">Total</td>
        <td COLSPAN=1 ALIGN=LEFT style="border-left-style:hidden;">-invoice_value-</td>
    </tr>
    <tr>
        <td COLSPAN=3 ALIGN=LEFT style="border-right-style:hidden;"><strong>COD Amount</strong></td>
        <td COLSPAN=1 ALIGN=LEFT style="border-left-style:hidden;"><strong>-cod_value-</strong></td>
    </tr>

    <tr>
        <td COLSPAN=4>
            Prices are inclusive of all applicable taxes
        </td>
    </tr>
    <tr>
        <td COLSPAN=4 style="border-bottom-style:hidden;">If Undelivered, please return to:</td>
    </tr>
    <tr>
        <td COLSPAN=4>
            <strong>
                <div>B-220/2, 1st Floor, Right Door, Savitri Nagar, New Delhi: 110017 Ph. 8376035546</div>
            </strong>
        </td>
    </tr> </table> </body> </html>

The pdf is always generated as partial of the page while I want it to cover entire pdf page.

I think that you might have to add this to your styles to configure the page:

    @page {
       size: 11cm 14.1cm;
       margin-left: 0.5cm;
       margin-top: 0.5cm;

    }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM