cfdocumentを使用してColdFusionでPDFを作成しています。ヘッダー行が斜めになっているテーブルを作成して、ページにすべて収まるようにする必要があります。ここに私が達成しようとしているものの例があります。 これまで見つかったHTMLやCSSの例はありませんでした。今、私はこれがColdFusionやPDFの作成に特有のものかどうか疑問に思っています。私はこのコードがここの似たような質問の答えから直接得られたことを知っていますが、私の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>
これはHTMLとして機能するので、間違いなくcfdocumentの制限です。これはCSS2(https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-d-e/cfdocument.html)をサポートしています(ほとんど)。また、 'transform'はCSS3です。私が今までに見つけたもっとも近いものは、いくつかのハッキングについて言及している[この古いスレッド](https://forums.adobe.com/thread/80941)です(いずれも非常に優れたIMOではありません)。 – Leigh
PDFドキュメントを生成するには、ColdFusion 8,9,10,11および2016でWKHTMLTOPDF(無料のコマンドラインプログラム)を使用することをお勧めします。傾いた/回転したテキスト、シャドウ、Webフォント(フォントワーム)、SVG、CSSグラデーション、アルファPNGサポート、相対/絶対位置などでうまくいった。 –
はい、私はcfdocumentで斜めのテキストが可能であるとは思わない。@ JamesMoberg - WKHTMLTOPDFで斜めのテキストを作成する例がある場合は、将来的に他の人に役立つ可能性があるので、答えとして投稿してください。 – Leigh