Django中将使用flex的HTML+Bootstrap文件转PDF时flex不生效如何解决

问题根源 #

xhtml2pdf（pisa）本身的渲染引擎仅支持有限的CSS2属性，完全不支持CSS3的Flexbox布局，即使你把Bootstrap的flex相关样式手动写入style标签也无法被识别，这是工具本身的能力限制，并非代码逻辑错误。

方案1：不更换工具，替换Flex布局为兼容样式 #

xhtml2pdf对float、传统table布局、固定宽度的块级元素支持度很高，你可以把所有用到d-flex的地方改成兼容写法，不需要修改Python代码：

1. 横向两栏布局直接用float: left配合固定宽度实现
2. 元素靠右对齐的ms-auto可以改成float: right
3. 核心布局修改示例：

<div class="mt-5 container" style="border: 2px solid gray; overflow: hidden;">
    <!-- 头部布局替换 -->
    <div style="overflow: hidden;">
        <h1 style="float: left; margin: 0;">LOGO</h1>
        <span style="float: right; font-weight: bold;">Some Text</span>
    </div>
    <hr  class="hritem"/>
    <div style="overflow: hidden;">
        <h3 style="float: left; margin: 0;">Title</h3>
        <div style="float: right;">
            <p>Date: 12-12-2021</p>
            <p>Document ID: 9868</p>
        </div>
    </div>
    <hr  class="hritem"/>
    <!-- 两栏信息布局替换 -->
    <div style="overflow: hidden;">
        <div style="float: left; width: 49%; border-right: 1px solid gray; padding-right: 1%;" id="location">
            <!-- 原有地址内容不变 -->
        </div>
        <div style="float: left; width: 48%; padding-left: 1%;" id="consumer">
            <!-- 原有用户信息内容不变 -->
        </div>
    </div>
</div>

方案2：更换支持Flex布局的PDF渲染库 #

如果不想大幅修改现有HTML结构，可以换成WeasyPrint，该库对CSS3包括Flexbox的支持度远高于xhtml2pdf，替换步骤如下：

1. 安装依赖：

pip install weasyprint

2. 修改utils.py的渲染函数：

from io import BytesIO
from django.http import HttpResponse
from django.template.loader import get_template
from weasyprint import HTML

def render_to_pdf(template_src, context_dict={}):
    template = get_template(template_src)
    html  = template.render(context_dict)
    result = BytesIO()
    HTML(string=html).write_pdf(result)
    return HttpResponse(result.getvalue(), content_type='application/pdf')

3. views.py无需改动，原有带Flex布局的HTML可以直接正常渲染。

内容的提问来源于stack exchange，提问作者Chetan Sureka