Weasyprint中Bootstrap CSS未生效的Flask应用问题求助

我之前也踩过WeasyPrint和Bootstrap兼容的坑，毕竟WeasyPrint的CSS渲染引擎和浏览器差异不小，对Bootstrap这类现代框架的支持有不少局限。结合你在PythonAnywhere不能用pdfkit的情况，给你几个实用的解决方案：

1. 确保CSS资源被WeasyPrint正确抓取 #

WeasyPrint不会像浏览器那样自动处理相对路径的资源，这是最常见的问题：

• 如果用本地Bootstrap CSS，一定要用绝对路径，或者生成PDF时指定base_url参数，让WeasyPrint能正确解析静态资源路径。
• 尽量别依赖CDN链接，PythonAnywhere的环境可能限制外部资源抓取，而且WeasyPrint处理CDN资源容易出问题。

修改示例：

from weasyprint import HTML
from flask import request

# 生成PDF时传入base_url，基于当前请求的根路径
pdf = HTML(string=your_html_content, base_url=request.url_root).write_pdf()

2. 内联Bootstrap CSS + 补充兼容样式 #

WeasyPrint对外部CSS的加载容错性差，直接把Bootstrap的CSS内联到HTML里能避免大部分加载问题。同时，你需要手动替换WeasyPrint不支持的Bootstrap特性：

具体实现代码： #

@app.route('/pdf_send', methods=('GET', 'POST'))
@login_required
def pdf_send():
    # 读取本地Bootstrap CSS（PythonAnywhere上要用绝对路径，比如/home/你的用户名/mysite/static/css/bootstrap.min.css）
    with open('static/css/bootstrap.min.css', 'r', encoding='utf-8') as f:
        bootstrap_css = f.read()

    # 渲染HTML，内联Bootstrap CSS并补充兼容样式
    html = render_template_string('''
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>PDF Document</title>
        <style>{{ bootstrap_css }}</style>
        <!-- 修复WeasyPrint不兼容的Bootstrap样式 -->
        <style>
            /* WeasyPrint对Flex布局支持有限，替换为浮动布局 */
            .row {
                display: block;
                overflow: hidden;
                margin-bottom: 1rem;
            }
            .col-md-6, .col-sm-4 {
                float: left;
                box-sizing: border-box;
                padding: 0 15px;
            }
            .col-md-6 { width: 50%; }
            .col-sm-4 { width: 33.333%; }
            
            /* 强制表格适应PDF页面 */
            table { width: 100%; border-collapse: collapse; }
            
            /* 修复Bootstrap的margin/padding在PDF里的异常 */
            .container { width: 90%; margin: 0 auto; }
        </style>
    </head>
    <body>
        <!-- 你的页面内容，比如Bootstrap组件 -->
        <div class="container mt-4">
            <div class="row">
                <div class="col-md-6">
                    <h3 class="text-primary">Section 1</h3>
                    <p>Some content here...</p>
                </div>
                <div class="col-md-6">
                    <h3 class="text-success">Section 2</h3>
                    <p>More content here...</p>
                </div>
            </div>
        </div>
    </body>
    </html>
    ''', bootstrap_css=bootstrap_css)

    # 生成PDF，指定页面尺寸
    pdf = HTML(string=html, base_url=request.url_root).write_pdf(
        stylesheets=[CSS(string='@page { size: A4; margin: 1.5cm; }')]
    )

    # 这里写你的邮件发送逻辑，把pdf作为附件
    # ...

    return "PDF sent successfully!"

3. 启用Bootstrap打印专用样式 #

Bootstrap自带打印媒体查询，WeasyPrint默认会识别打印样式，你可以显式调整来适配PDF：

@media print {
    /* 继承Bootstrap的打印样式，再补充自己的调整 */
    .container { width: auto; }
    .row { display: block; }
    /* 隐藏不需要打印的元素 */
    .no-print { display: none !important; }
}

4. 排查不兼容的CSS属性 #

WeasyPrint对一些现代CSS特性支持不佳，比如：

• position: sticky
• 部分Flexbox属性（如flex-wrap: wrap）
• 复杂Grid布局
• 动画/过渡效果

如果某个组件样式异常，直接在浏览器里检查对应的CSS，替换成WeasyPrint支持的属性（比如用浮动代替Flex，用固定宽度代替百分比布局）。

内容的提问来源于stack exchange，提问作者Mindaugas N.