8

我正在使用xhtml2pdf(former pisa，或者反之亦然？:)) 从 django 模板生成 PDF。模板渲染正常，但我从该模板获得的 PDF 以一种非常奇怪的方式损坏：表格单元格中的文本被提升到单元格的顶部，因此大写字母触及单元格的上边框：

在此处输入图像描述

在浏览器中它看起来像这样：

在此处输入图像描述

我试过了：

  1. Applying vertical-align- 看起来它只是被忽略了，至少我没有注意到 pdf 的任何变化，即使它们在生成的 html 中
  2. 应用padding-top- 它会向下移动文本，但也会增加单元格高度。
  3. 将文本包装成spanwith margin-top- 效果相同padding-top

我认为原因是文本由 xhtml2pdf 在行的最顶部呈现，而浏览器倾向于在块中间的某个地方呈现它。换句话说，文本块在 pdf 和 html 中占据相同的位置，但是块内的文本被移动了。但这只是我的猜测。

那么，有没有人遇到过同样的问题？难道我做错了什么？任何可能的解决方法？

代码片段：

4

2 回答 2

1

感谢您的示例 J0HN - 做得很好。网上还没有很多 weasyprint 的例子。

当我对表格行或单元格应用高度时，我发现垂直对齐失败。我意识到如果我在行中创建了一个空白单元格，将其分配为 0 宽度和所需的高度，那么该行中的其他单元格我可以应用垂直对齐并且它们将正确呈现。

这是一个示例（创建一个卡片大小的页面，其中包含 1 个文本块，该文本块在页面上水平和垂直居中）：

doc_css = CSS(string='''@page { size: 3.75in 2.75in; margin: .25in }
                    html, body {margin: 0; padding: 0; width: 100%; height: 100%;
                    }''')
doc = HTML(string='''
    <table style="height: 100%; width: 100%;
                  margin: 0;
                  padding: 0;
                  border: 1px solid black">
        <tr>
            <td style="height: 100%; width: 0px;"> /This sets the row height - empty cell
            <td style="vertical-align: middle;
                text-align: center;
                border: 1px solid blue">
                The text to be centered here.
        </tr>
    </table>
''', base_url='/home/Desktop').render(stylesheets=[doc_css])
doc.write_pdf('./weasy_print_sample_pages_list.pdf')
于 2014-11-15T18:18:23.463 回答
0

我添加了一些填充 (padding-top:2px) 来解决问题

于 2021-10-13T22:32:01.840 回答