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>

Answer 1

我使用cfdoucment来处理PDF文档的样式很多，并且在CSS方面遇到了很多麻烦。如此多的功能都不受支持，这样可以使PDF的样式变得更加容易：遗憾的是，可以使用CSS3属性，CSS伪元素甚至!important标记。

然而，有一些技巧和工作可以用来（有些）达到你想要的结果，他们通常需要稍微定制你的标记，这就是我将如何解决你的问题：

首先：使用CSS for CF PDF获取带有边框单元格/行的表格并不是一项有趣的任务。其中一个不支持的CSS属性是border-collapse: collapse;，所以如果你使用表格，那么单元格之间会有空格等等。你最终会得到类似这样的标准表：< / p>

因此，我可能只为您的PDF内容使用<div>生成单独的标记，并向其添加pdf-only类或其他内容，以便仅在PDF上显示并隐藏在其他位置。

在您的问题中，由于CSS的限制，有2个问题无法修复。 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）垂直文字

我可以想到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/>

这显然不会旋转文本，但它会使内容更容易适应标题。

希望有所帮助。

Answer 2

您使用的是CF11还是以上？如果是这样，请使用<cfhtmltopdf>更好的css支持，而不是旧版<cfdocument>。

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

PDF表格倾斜的标题

2 个答案: