2017-04-12 23 views
9

cfdocumentを使用してColdFusionでPDFを作成しています。ヘッダー行が斜めになっているテーブルを作成して、ページにすべて収まるようにする必要があります。ここに私が達成しようとしているものの例があります。 Example I created in GIMPこれまで見つかったHTMLやCSSの例はありませんでした。今、私はこれがColdFusionやPDFの作成に特有のものかどうか疑問に思っています。私はこのコードがここの似たような質問の答えから直接得られたことを知っていますが、私のPDFに斜めの列を持つテーブルは作成しません。 これが作成されます。 My result, which is not slanted斜めヘッダ付き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> 
+1

これは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

+1

PDFドキュメントを生成するには、ColdFusion 8,9,10,11および2016でWKHTMLTOPDF(無料のコマンドラインプログラム)を使用することをお勧めします。傾いた/回転したテキスト、シャドウ、Webフォント(フォントワーム)、SVG、CSSグラデーション、アルファPNGサポート、相対/絶対位置などでうまくいった。 –

+1

はい、私はcfdocumentで斜めのテキストが可能であるとは思わない。@ JamesMoberg - WKHTMLTOPDFで斜めのテキストを作成する例がある場合は、将来的に他の人に役立つ可能性があるので、答えとして投稿してください。 – Leigh

答えて

2

私はcfdoucmentかなりを使用してPDF文書をスタイリングに取り組み、CSSで多くの問題がありました。多くの機能がサポートされていないため、CSS3のプロパティ、CSSの擬似要素、そして!importantタグでさえも使用できます。

まず:

あなたが望む結果を得るため(やや)に使用することができますが、十分なトリックや回避策がありますが、彼らは通常、ここで私はあなたの問題を解決するに行くか方法です、あなたのマークアップビットのカスタマイズが必要です。境界にセル/行がある表を取得することは、CF PDFのCSSで楽しい作業ではありません。

enter image description here

だから私は:サポートされていないCSSのプロパティの1つは、標準テーブルのためにこのようなものになってしまいます..あなたは、テーブルを使用する場合border-collapse: collapse;はそうなど、細胞間にスペースがあるでしょうですおそらく<div>を使用して別のマークアップを生成し、PDFコンテンツにのみ追加し、pdf-onlyクラスなどを追加してPDFにのみ表示したり、他の場所に非表示にすることができます。


質問には、CSSの制限により修正できない2つの問題があります。 1)傾斜した線2)垂直に傾斜した線。

1)斜線:

Iヘッダ細胞に(下記参照)背景画像を添付し、従うことができれば簡単だいくつかの他の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; 
} 

enter image description hereは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です)

enter image description here

ように斜めヘッダ

の世話をします

2)縦型テキスト

私は2つのソリューションを考えることはできませんが、どれも理想的ではありませんが、再びCF PDFをスタイリングして創造しなければなりません。

あなたの質問(回転したテキスト)に投稿した内容を正確に取得するには、これを達成する唯一の方法はテキストの代わりにイメージを使用することだと思います。うん、あなたのテーブルがダイナミックになっていて、ヘッダーテキストが絶えず変更されていると、それがうまくいかない場合は、特に気にしています。あなたは、あなたのヘッダーセル内の別の要素を追加し、その背景と中心位置をとしてそのイメージを設定します

enter image description here

:このリストはあまり変化しない場合しかし、あなたは同様に、画像、例を使用する場合があります。

<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/> 

明らかにテキストは回転しませんが、ヘッダーにコンテンツを簡単に収めることができます。

希望に役立ちます。

関連する問題