Python3 pdfkit issue in generating pdf

Question

Im using python3 pdfkit to convert html to pdf .

When using macbook , CSS (Bootstrap 5) are not applied properly while generating pdf but the same works fine in ubuntu .

is there any issue with MAC OS ? im using MacOS Big Sur Version11.4

Thanks in advance

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Georgian&display=swap" rel="stylesheet">

    <style>
        @media print {
            #LEFT li {
                height: auto !important;
            }
        }

       

        /* #LEFT li{
            height: 100%;
        } */

        .bg-ab {
            background-color: #f5f4f7 !important;
        }

        .icon_circle_success {
            border-radius: 50%;
            border: 1px solid #198754;
            padding: 6px 6px;
            margin-right: 6px;
            font-size: 12px;
            color: #198754;
            display: flex;
            align-items: center;
        }

        .icon_circle_dark {
            border-radius: 50%;
            border: 1px solid;
            padding: 6px 6px;
            margin-right: 6px;
            font-size: 12px;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="row p-0 m-0" id="pdf" style="font-family: Arial, Helvetica, sans-serif;">
        <ul class="connectedSortable left_list mb-0 col-3 pt-4 px-0"  id="LEFT" style="background-color: rgb(12, 83,
            157); color: white;">
            <div class="text-center px-3">
                <span class="text-capitalize" id="designation">Box1 Col-3</span>
            </div>
        </ul>
        <ul class="connectedSortable left_list mb-0 col-9 pt-4 px-0 !important" id="LEFT" style="background-color: rgb(201, 204, 37); color: white;">
            <div class="text-center px-3">
                <span class="text-capitalize" id="designation">Box 2 Col-9</span>
            </div>
        </ul>
    </div>
</body>

</html>

HTML Page output

python3 code to generate pdf

import pdfkit;
options = {
                'margin-top' : '.3in',
                'margin-bottom' : '1in',
                'margin-left' : '.1in',
                'margin-right' : '.1in',
            }
pdfkit.from_file('pdfTest.html', 'pdfTest.pdf',options=options,verbose=True);

PDF Generation output

Python3 pdfkit issue in generating pdf

0 Answers0