帶傾斜標題的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> 

Answer 1

您是否在使用CF11或以上版本？如果是這樣，請使用<cfhtmltopdf>以更好的CSS支持，而不是傳統的<cfdocument>。

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

Answer 2

我使用cfdoucment頗有幾分造型PDF文檔工作，已經有很多的麻煩與CSS。如此多的功能不被支持，這將使得樣式更容易：CSS3屬性，CSS僞元素，甚至不能使用!important標籤。

然而有足夠的技巧和變通，你可以用它來（有點）達到你想要的結果，他們通常需要定製您的標記了一下，這是我會怎麼去解決你的問題：

第一：使用帶邊框的單元格/行獲取表格對於CF PDF來說不是一件有趣的任務。一，這不是支持的CSS屬性是border-collapse: collapse;所以如果你使用表會出現細胞之間的空間，等等。你會是這樣的一個標準表來結束：

所以我可能會使用<div>爲您的PDF內容生成單獨的標記，並添加一個pdf-only類或其他類，以便僅在PDF上顯示並隱藏在別處。

---

在您的問題中，有2個問題由於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）垂直文本

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

這顯然不會旋轉文本，但它會使它更容易適應標題中的內容。

希望有所幫助。