xhtml2pdf 比薩 css 壞了沒有功能

Question

我正在嘗試使用 Django 使用 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 ， xhtml2pdf使用reportlab實際創建PDF。

做一些調試 - 我在xhtml2pdf執行了parser.py，看看我是否可以解決CSS “缺失”或應用於錯誤元素的問題。

我發現CSS已成功解析，並且文檔片段（在代碼中）的轉換工作正常，正確的CSS元素應用於正確的元素。

我相信這個問題來自reportlab pdf渲染引擎。 這里記錄在案。 它與CSS和您可以傳遞給它的指令之間沒有1：1映射。

我第一次意識到它回答了這個問題。 例如，在reportlab文檔的表格渲染部分（開源用戶指南，第7章，第76頁）中，很明顯border-style CSS屬性沒有模擬 - 所以盡管理論上你可以指定一個邊框樣式並且不會拋出任何錯誤，該值將被忽略。

在調查CSS到pdf映射時，我發現這個軟件（Javascript）也將HTML / CSS映射到pdf。 我在這個問題的HTML和我鏈接的另一個問題上嘗試過。 這樣可以將頁面正確地呈現到pdf文檔中，因此我認為這不是pdf文檔規范的基本限制，而是reportlab模塊的基本限制。

在我看來，這是xhtml2pdf一個問題。 這對表來說似乎特別糟糕，但顯然也會影響其他類型的文檔。 很抱歉不解決您的問題，但我希望這可以解釋一下。

Answer 2

如本答案中所述，僅支持少數 css 屬性，並且您無法鏈接到外部 css 文件。 您必須將您的 css 直接放在您的 html 頁面中（在您的 html 頁面的 head 標簽內聲明一個樣式標簽）。

就我而言，我會考慮通過 pdfkit 使用 wkhtmltopdf。 pdfkit 是 wkhtmltopdf 的包裝器。

xhtml2pdf 比薩 css 壞了沒有功能

問題描述

1 個解決方案

解決方案1
9 2015-06-24 11:27:27

解決方案2
0 2022-07-20 11:07:25

xhtml2pdf 比薩 css 壞了沒有功能

問題描述

1 個解決方案

解決方案1 9 2015-06-24 11:27:27

解決方案2 0 2022-07-20 11:07:25

解決方案1
9 2015-06-24 11:27:27

解決方案2
0 2022-07-20 11:07:25