时间戳

首页 > 解决方案 > 将 html + bootstrap 文件（使用 flex）转换为 pdf - Django？

python - 将 html + bootstrap 文件（使用 flex）转换为 pdf - Django？

问题描述

我正在尝试创建一个 webapp，其中数据来自某个 API 并保存到数据库中。现在，我想使用这些数据创建一个 pdf。我用自定义 css 和引导程序（使用 display: flex; ）准备好我的 html 代码。我已经尝试过使用 xhtml2pdf、reportlab 库，但无法使用 CSS flex 属性正确处理。

HTML 的源代码和一些 python 文件附在下面。

HTML 文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Invoice-ID</title>
    <style type="text/css">
    /* Bootstrap CSS */
        .col-md-7 {
            
            flex: 0 0 auto;
            width: 58%;
        }
        .container {
            width: 1320px;
        }
        .bg-light {
            background-color: #f8f9fa !important;
        }
        .nav {
            display: flex;
            flex-wrap: wrap;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
        }
        .justify-content-center {
            justify-content: center;
        }
        .navbar {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding-top: .5rem;
            padding-bottom: .5rem;
        }
        .navbar>.container-fluid {
            display: flex;
            flex-wrap: inherit;
            align-items: center;
            justify-content: space-between;
        }
        .navbar-light .navbar-brand {
            color: rgba(0, 0, 0, .9);
        }
        .navbar-brand {
            padding-top: .3125rem;
            padding-bottom: .3125rem;
            margin-right: 1rem;
            font-size: 1.25rem;
            text-decoration: none;
            white-space: nowrap;
        }
        .flex-column {
            flex-direction: column !important;
        }
        .d-flex {
            display: flex !important;
        }
        .w-50 {
            width: 50% !important;
        }
        .ms-2 {
            margin-left: .5rem !important;
        }
        .p-3 {
            padding: 1rem !important;
        }

    /* Custom CSS */
        body {
            font-weight: 300;
            font-size: 14px;
        }
        .wrapper {
            border: 2px solid gray;
            border-width: 2px;
        }
        #location {
            /* border: 2px solid gray; */
            border-right: 1px solid gray;
            border-width: 1px;
            margin-bottom: 2rem;
        }
        .header {
            font-size: 20px;
            font-weight: 100;
            text-align: center;
            color: #007cae;
        }
        .title {
            font-size: 22px;
            font-weight: 100;
            padding: 10px 20px 0px 20px;
        }
        .title span {
            color: #007cae;
        }
        .details {
            padding: 10px 20px 0px 20px;
            text-align: left !important;
        }
        /* . {
            margin-left: 455px;
        } */
        .hritem {
            border: 1px solid gray;
            border-width: 2px;
        }
    </style>
</head>
<body>
    <div class="mt-5 container" style="border: 2px solid gray;">
        <!-- Header Start -->
        <div class="d-flex justify-content-center align-items-center">
            <!-- <img src="E:\Python\Django web\logiswift\Deployment\main\static\assets\logo.png" alt="Logo" width="350px"> -->
            <h1>LOGO</h1>
            <div class="ms-auto">
                <span><b>Some Text</b></span>
            </div>
        </div>
        <hr  class="hritem"/>
        <div class="d-flex justify-content-center align-items-center">
            <h3>Title</h3>
            <div class="ms-auto ">
                <p>Date: 12-12-2021</p>
                <p>Document ID: 9868</p>
            </div>
        </div>
        <!-- Header End -->

        <hr  class="hritem"/>
        
        <!-- General Trip Info Start -->
        <div class="d-flex">
            <div class="w-50" id="location">
                <p>
                    <h6>Current Location</h6>
                    <span>Address Line 1,</span>
                    <span>Address Line 2,</span>
                    <span>City,</span>
                    <span>State - PIN</span>
                </p>
                <p>
                    <h6>Expected Location</h6>
                    <span>Address Line 1,</span>
                    <span>Address Line 2,</span>
                    <span>City,</span>
                    <span>State - PIN</span>
                </p>
            </div>
            <div class="w-50 ms-2 mt-3" id="consumer">
                <h6>consumer Details</h6>
                <hr/>
                <p>
                    <span style="font-size: medium; font-weight: 400;"><b>Name: </b></span>
                    <span>Your Name</span>
                </p>
                <p>
                    <span style="font-size: medium; font-weight: 400;"><b>Consumer ID: </b></span>
                    <span>Unique Consumer ID</span>
                </p>
            </div>
        </div>
        <!-- General Trip Info End -->
        
        <hr  class="hritem"/>
        
        <!-- Bill Start -->
        <!-- <div>
            <p>Bill Will Come here</p>
        </div> -->
        <!-- Bill End -->
        
        <!-- <hr  class="hritem"/> -->
        
        <!-- Footer Start -->
        <!-- <div>
            <p>Additional info like address of the company and seal comes here.</p>
        </div> -->
        <!-- Footer end -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

实用程序.py

from io import BytesIO
from django.http import HttpResponse
from django.template.loader import get_template
from xhtml2pdf import pisa

def render_to_pdf(template_src, context_dict={}):
    template = get_template(template_src)
    html  = template.render(context_dict)
    result = BytesIO()
    pdf = pisa.pisaDocument(BytesIO(html.encode("UTF-8")), result)
    if not pdf.err:
        return HttpResponse(result.getvalue(), content_type='application/pdf')
    return None

视图.py

def generatePDF(request):
    template = get_template('main/invoices.html')
    context = {
        "date": datetime.date.today(),
    }
    html = template.render(context)
    pdf = render_to_pdf('main/invoices.html', context)
    return HttpResponse(pdf, content_type="application/pdf")

我不明白为什么上面的代码没有呈现 CSS flex 属性。我什至尝试在样式标签中使用引导类，但 CSS flex 不会在呈现 PDF 时出现。

请帮帮我。

提前致谢

标签： pythonhtmlcssdjangoflexbox

解决方案

推荐阅读