PDF表格带有斜体标题

Question

我正在使用cfdocument在ColdFusion中创建PDF。我需要制作一个表格，其中标题行是倾斜的，以便所有内容都适合页面上。以下是我尝试实现的示例。 到目前为止，我找到的所有HTML或CSS示例都没有起作用。现在我想知道这是否是ColdFusion和/或PDF创建特定的怪癖。我知道这段代码直接来自类似问题的答案，但它没有在我的PDF中创建带有倾斜列的表格。 它创建了这个。

//CSS
* {
  box-sixing: border-box;
}

.outerDiv {
  background: grey;
  height: 200px;
  width: 100px;
  border: 1px solid black;
  border-bottom: 0;
  border-left: 0;
  transform: skew(-30deg) translateX(58%);
}

th:first-child .outerDiv {
  border-left: 1px solid black;
  position: relative;
}

.innerDiv {
  position: absolute;
  width: 250px;
  height: 85px;
  bottom: -34%;
  left: 10px;
  transform: skew(30deg) rotate(-60deg);
  transform-origin: 0 0;
  text-align: left;
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

.well {
    min-height: 20px;
    padding: 5px;
    margin-bottom: 10px;
    background-color: #f5f5f5;
    border: 1px solid black;
    border-radius: 3px;

}

.well_tight {
    padding: 3px;
    margin-bottom: 5px;
    background-color: #f5f5f5;
    border: 1px solid black;
    border-radius: 3px;

}

//ColdFusion/HTML

<cfdocument format="pdf" name="#formname#" pagetype="letter" marginleft=".25" marginright=".25" margintop=".25" marginbottom=".5">

<cfoutput><style type="text/css">@import "/mach15/web/assets/css/formPDF.css";</style></cfoutput>


<div class="well">
     <table cellpadding="0" cellspacing="0">
          <tr>
                <th>
                  <div class="outerDiv">
                    <div class="innerDiv">This is first column header</div>
                  </div>
                </th>
                <th>
                  <div class="outerDiv">
                    <div class="innerDiv">This is second column header</div>
                  </div>
                </th>
                <th>
                  <div class="outerDiv">
                    <div class="innerDiv">This is third column header</div>
                  </div>
                </th>
          </tr>
          <tr>
                <td> 1 </td>
                <td> 2 </td>
                <td> 3 </td>
          </tr>
          <tr>
                <td> 4 </td>
                <td> 5 </td>
                <td> 6 </td>
          </tr>
          <tr>
                <td> 7 </td>
                <td> 8 </td>
                <td> 9 </td>
          </tr>
          <tr>
                <td> 10 </td>
                <td> 11 </td>
                <td> 12 </td>
          </tr>
    </table>
</div>

- Jacqueline Connors

---

它可以作为HTML工作，所以这绝对是cfdocument的限制。它仅支持CSS2（大多数情况下），而transform是CSS3。到目前为止，我找到的最接近的是这个旧帖子，其中提到了一些hack（但在我看来都不是很好）。 - Leigh

我建议在ColdFusion 8、9、10、11和2016中使用WKHTMLTOPDF（一个免费的命令行程序）来生成PDF文档。我已经成功地实现了倾斜/旋转文本、阴影、Web字体（fontawesome）、SVG、CSS渐变、Alpha PNG支持、相对/绝对位置等功能。 - James Moberg

是的，我怀疑在cfdocument中创建倾斜文本是不可能的。@JamesMoberg - 如果您有使用WKHTMLTOPDF创建倾斜文本的示例，请随时将其发布为答案，因为这可能对未来的其他人有所帮助。 - Leigh

我会尽力而为。样例中提供的HTML“原样”使用不起来，因此我认为可能需要添加一些针对Chrome特定的CSS变换规则，或者可能需要使用一些JS来实时转换为画布。 - James Moberg

Answer 1

我主要使用来处理PDF文档的排版，但是在使用CSS时遇到了很多麻烦。许多功能都不被支持，这会使得样式化PDF变得更加困难：CSS3属性、CSS伪元素甚至连!important标签都不能使用。

不过，有足够的技巧和解决方法可以（在某种程度上）实现您想要的结果，通常需要自定义您的标记。以下是我解决您问题的步骤：

首先：对于CF PDF来说，获取具有有边框单元格/行的表格并不是一项有趣的任务。其中一个不支持的CSS属性是border-collapse: collapse;，因此如果使用表格，则单元格之间会有空格等等。对于标准表格，您最终会得到如下结果：

所以我可能会使用<div>生成单独的标记，用于您的PDF内容，并添加一个pdf-only类或其他内容，仅在PDF上显示并在其他地方隐藏。

---

在您的问题中，有两个问题由于CSS的限制而无法修复。1）斜线2）垂直斜体文本。

1）斜线： 我能够通过将背景图像（见下文）附加到标题单元格并移动它们以及一些其他希望易于跟踪的CSS代码来创建斜块：

.th {
    padding:10px 0;
    height: 200px;
    position: relative;
    left:50px;
    border-top: 1px solid #000;
    background:url(../img/line.gif) no-repeat right center;
}

这是带有CSS的完整标记：

<div class="table-wrapper pdf-only">
  <div class="row th-row">
    <div class="th th1">&nbsp;</div>
    <div class="th th2">&nbsp;</div>
    <div class="th th3">&nbsp;</div>
    <div class="th th4">&nbsp;</div>
  </div>
  <div class="row td-row first-td-row">
    <div class="td td1">Row 1</div>
    <div class="td td2"><span class="td-border"></span>r1c1</div>
    <div class="td td3"><span class="td-border"></span>r1c2</div>
    <div class="td td4"><span class="td-border"></span>r1c3<span class="td-last-border"></span></div>
  </div>
  <div class="row td-row">
    <div class="td td1">Row 2</div>
    <div class="td td2">r2c1</div>
    <div class="td td3">r2c2</div>
    <div class="td td4">r2c3</div>
  </div>
</div>

CSS：

.table-wrapper {
    width:75%; // so that the last column won't get cut off
    position: relative;
}

.row {
    width: 100%;
}

.td-row {
    border-bottom:1px solid #000;
    width: 100%;
    position: relative;
}

.td {
    padding:15px 0;
    text-indent: 10px;
    position: relative;
}

.th {
    padding:10px 0;
    height: 200px;
    position: relative;
    left:50px; // this should the same as the width of line.gif
    border-top: 1px solid #000;
    background:url(../img/line.gif) no-repeat right center;
}


/* Adjust the td, th widths below . You can even add different % to 
different cols as long as the total adds up to 100% per row. */

.td, .th {
    width: 25%; 
    float: left;
}

.th1 {
    border-top: 0;
}

span.td-border {
    height:1000px;
    width: 1px;
    position: absolute;
    border-left: 1px solid #000;
    left: 0;
    top:0;
}
span.td-last-border {
    height:1000px;
    width: 1px;
    position: absolute;
    border-left: 1px solid #000;
    right: -10px;
    top:0;
}

.first-td-row {
    border-bottom: 1px solid #000
}

这是您将获得的内容：（这是使用<cfdocument>实际生成的PDF文件）

那么，这就解决了倾斜的标题。

---

2）垂直文本

我能想到两种解决方案，但都不理想，但既然我们正在为CF PDF样式设计，我们将不得不有所创意。

要获得您在问题中发布的内容（旋转文本），我认为唯一实现此目标的方法是使用图像而不是文本。是的，我知道这是作弊，特别是如果您的表格具有动态标题文本，并且不断更改，这种方法就行不通。但是，如果此列表不会太经常更改，那么最好使用图像，例如：

然后，在您的标题单元格内添加另一个元素，并将该图像设置为其背景并居中定位：

<div class="th th1">
  <div class="text"></div>
</div>

.th .text {
  width:100%;
  height:100%;
  position:absolute;
}

.th1 .text {
  background-image:url(../img/col1-text.gif) no-repeat center center;
}

如果使用图像作为文本不起作用，你可以循环遍历文本，在每个字母后添加一个换行符和一个空格，并且以递减的方式递增它：

&nbsp;&nbsp;&nbsp;1<br/>
&nbsp;&nbsp;l<br/>
&nbsp;o<br/>
C<br/>

那显然不会旋转文本，但它将使内容更容易适应页眉中。希望这有所帮助。

- Sammy

Answer 2

你正在使用CF11或以上版本吗？如果是的话，请使用<cfhtmltopdf>，它具有更好的CSS支持，而不是传统的<cfdocument>。

https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-g-h/cfhtmltopdf.html

- Henry