pdf下载文件不响应CSS答案

【问题标题】：pdf download file does not respond to CSSpdf下载文件不响应CSS
【发布时间】：2021-09-21 04:40:39
【问题描述】：

我有我用写作模式设置样式的表头：vertical-lr。它完美地显示在屏幕上。

我使用相同的 CSS 来设置 PDF 文件的样式。但是，标题没有垂直显示。事实上，它不会响应许多 CSS 样式。

如何使 PDF 文件在下载时像屏幕上一样显示？

<table>
<thead>
                    <tr>
                         <th style="border: 1px solid black; font-size:11px;width:120px;text-align:center;font-weight: bolder;color: black;vertical-align: bottom;">
                                                    SUBJECTS
                                                </th>
                                               <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA1 10%
                                                </th>
                                               <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA2 10%
                                                </th>
                                               <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA3 10%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA4 10%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA5 10%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA6 10%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA TOTAL 60%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    EXAM 40%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    TOTAL 100%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    GRADE
                                                </th>
                                               <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    HIGHEST IN CLASS
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    LOWEST IN CLASS
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    POSITION
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    REMARK
                                                </th>
                    </tr>
                </thead>
                </table>

【问题讨论】：

I used the same CSS to style the PDF file 是什么意思？你用什么来生成PDF？你说的是印刷风格吗？什么浏览器？
@Dominik — 问题被标记为mpdf
现在确实如此。

标签： html css pdf mpdf

【解决方案1】：

我能够使用这个解决方案https://github.com/mpdf/mpdf/issues/357来解决这个问题

我只将 text-rotate 属性应用于标题的 tr 标记。

<table>
<thead>
<tr text-rotate="90">
<th><p>Element type 1A</p><p>Second line</p><th><p>Element type longer 2A</p></th>
<th>Element type 3B</th>
<th>Element type 4B</th>
</tr>
</thead>
</table>

标题中的文字都被旋转了。

【讨论】：

【解决方案2】：

mpdf 的文档包括关于supported CSS 的部分。您所依赖的 writing-mode 属性不存在。它也不支持rotate()，否则您可能会尝试使用它。

我认为如果不更改为不同的 PDF 生成库，您将无法解决此问题。

【讨论】：