Question

我正在使用Djang +使用xhtml2pdf.pisa使用html + css生成PDF。但是，我遇到了CSS的各种奇怪问题。

以下是我的代码：

from django.template.loader import render_to_string
import cStringIO as StringIO
import xhtml2pdf.pisa as pisa
import cgi, os
def fetch_resources(uri, rel):
    path = os.path.join(settings.STATIC_ROOT, uri.replace(settings.STATIC_URL, ""))
    return path
def test_pdf(request):
    html = render_to_string('pdf/quote_sheet.html', { 'pagesize':'A4', }, context_instance=RequestContext(request))
    result = StringIO.StringIO()
    pdf = pisa.pisaDocument(StringIO.StringIO(html.encode("UTF-8")), dest=result, link_callback=fetch_resources)
    if not pdf.err:
        return HttpResponse(result.getvalue(), mimetype='application/pdf')
    return HttpResponse('Gremlins ate your pdf! %s' % cgi.escape(html))

我的模板：

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    {% load static from staticfiles %}
    {% load i18n %}
    <meta charset="utf-8"/>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="content-language" content='{% trans "g_locale2" %}'/>
    <title>{% block title %}{% endblock %}</title>
    <style type="text/css">
        @page {
            size: A4;
            margin: 1cm;
            @frame footer {
                -pdf-frame-content: footerContent;
                bottom: 0cm;
                margin-left: 9cm;
                margin-right: 9cm;
                height: 1cm;
                font-family: "Microsoft JhengHei";
            }
        }
        @font-face {
            font-family: "Microsoft JhengHei";
            src:url('{% static "ttf/msjh.ttf" %}');
        }
        @font-face {
            font-family: "Microsoft JhengHei";
            src:url('{% static "ttf/msjhbd.ttf" %}');
        }
        @font-face {
            font-family: "Helvetica";
            src:url('{% static "ttf/Helvetica_Reg.ttf" %}');
        }
        table.styled-table tr th {
            color: gray;
            background-color: blue;
            font-size: 14px;
            font-family:"Microsoft JhengHei";
            border: 1px solid black;
        }
        .biz_phone, .biz_fax {
            display: inline-block;
            width: 100px;
            line-height: 32px;
        }
        .biz-info {
            margin-bottom: 20px;
        }
    </style>
    <link rel="stylesheet" href='{% static "css/pdf.css" %}'/>
</head>
<body>
    <div id="main-content">
        <div class="container">
            <div class="biz-info">
                <div class="biz_name">{{ proj.biz.name }}</div>
                <div class="biz_address">{{ proj.biz.address }}</div>
                <div class="biz_phone">{{ proj.biz.phone }}</div>
                <div class="biz_fax">{{ proj.biz.fax }}</div>
            </div>
            <div class="table-div">
                <table class="styled-table">
                    <tr class="row_header">
                        <th class="col_order">{% trans "g_item_num" %}</th>
                        <th class="col_name">{% trans "g_item_name" %}</th>
                        <th class="col_provider">{% trans "g_provider_name" %}</th>
                        <th class="col_budget_quantity">{% trans "g_quantity" %}</th>
                        <th class="col_price">{% trans "g_item_price" %}</th>
                        <th class="col_total_price">{% trans "g_item_total" %}</th>
                    </tr>
                </table>
           </div>
        </div>
    </div>
</body>
</html>

我的代码非常简单，没什么特别的，它们几乎是从网上逐字复制的。我遇到了许多奇怪的问题：

font-size，background-color在外部css中工作，但仅在应用于body或html标记时才有效。
宽度，行高等无论外部，内部还是内联都无效。
父div上的margin-bottom应用于每个子div而不是父div ...
各种其他随机问题......

除了认为css解析器和布局引擎完全不完整且不起作用之外，我无法从这些症状中观察到模式。但是我在网上找不到与我有同样问题的人。我疯了吗？我不确定这里发生了什么......任何帮助都会受到赞赏。

Answer 1

在幕后，xhtml2pdf使用reportlab来实际创建PDF。

进行一些调试 - 我跟踪了xhtml2pdf中parser.py的执行情况，看看我是否可以找出CSS失踪的地方＆＃39;或被应用于错误的元素。

我发现CSS已成功解析，并且文档片段(here in the code)的转换工作正常，正确的CSS元素应用于正确的元素。

我认为问题来自于reportlab pdf渲染引擎。这里记录在案。它与CSS和您可以传递给它的指令之间没有1：1映射。

我第一次意识到它answering this question。例如，在reportlab documentation（开源用户指南，第7章，第76页）的表格渲染部分中，显然border-style CSS属性没有模拟 - 所以尽管在理论上您可以指定边框样式，不会抛出任何错误，该值将被忽略。

在调查CSS到pdf映射时，我发现this software (Javascript)也将HTML / CSS映射到pdf。我在这个问题的HTML和我链接的另一个问题上尝试过。这样设法将页面正确地呈现到pdf文档中，所以我认为这不是pdf文档规范的基本限制，而是reportlab模块的基本限制。

在我看来，这是xhtml2pdf的问题。这对表来说似乎特别糟糕，但显然也会影响其他类型的文档。很抱歉不解决您的问题，但我希望这可以解释它。

xhtml2pdf Pisa css破解无功能

1 个答案: