Tabela PDF z nachylonym nagłówkiem

Question

Tworzę pliki PDF w ColdFusion przy użyciu cfdocument. Muszę zrobić stolik z nachylonym rzędem nagłówków, aby wszystko pasowało do strony. Oto przykład tego, co próbuję osiągnąć. Żaden z przykładów HTML i CSS, które znalazłem do tej pory, nie zadziałał. Teraz zastanawiam się, czy jest to dziwactwo specyficzne dla ColdFusion i/lub tworzenia plików PDF. Wiem, że ten kod pochodzi bezpośrednio z odpowiedzi na podobne pytanie tutaj, ale nie tworzy tabeli z nachylonymi kolumnami w moim pliku PDF. To tworzy.

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

Czy używasz CF11 lub nowszego? Jeśli tak, użyj funkcji <cfhtmltopdf> z dużo lepszym wsparciem dla css zamiast dotychczasowego <cfdocument>.

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

Answer 2

pracuję na dokumentach PDF stylizacji z użyciem cfdoucment sporo i mieli wiele kłopotów z CSS. wiele funkcji nie jest obsługiwanych, co znacznie ułatwiłoby stylizację plików PDF: niestety można używać właściwości CSS3, elementów Pseudo CSS, a nawet znacznika !important.

Istnieje wystarczająco dużo jednak sztuczki i arounds pracy, które można wykorzystać do (nieco) osiągnięcia pożądanych rezultatów, zwykle wymagają dostosowywania Twój markup trochę, Oto jak pójdę o rozwiązywaniu problemu:

First: Stworzenie stołu z obramowanymi komórkami/wierszami nie jest zabawnym zadaniem z CSS dla CF PDF. Jedną z właściwości CSS, które nie są obsługiwane jest border-collapse: collapse; więc jeśli używasz tabel nie będzie przestrzenie między komórkami, etc .. będziesz skończyć z czymś takim do standardowej tabeli:

więc prawdopodobnie wygenerowałby oddzielny znacznik przy użyciu <div> tylko dla zawartości PDF i dodałby do niej klasę pdf-only, aby wyświetlać tylko w plikach PDF i ukrywać w innym miejscu.

---

W Państwa pytaniach występują 2 problemy, które nie mogą zostać naprawione z powodu ograniczeń CSS. 1) skośne linie 2) pionowy pochyły tekst.

1) pochyłe linie:

udało mi się stworzyć skośne klocki dołączając obraz tła (patrz niżej) do komórek nagłówka i przeniesienie ich wraz z innym kodem css, który jest nadzieją łatwe do naśladowania :

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

Oto pełna markup z 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 
} 

Oto co dostaniesz: (jest to rzeczywisty generowane PDF używając <cfdocument>)

tak, że dba o skośnych nagłówków

---

2) Tekst pionowy

Mogę wymyślić 2 rozwiązania, z których żadna nie jest idealna, ale potem znowu stylizujemy pliki CF, więc będziemy musieli stać się kreatywni.

Aby uzyskać dokładnie to, co napisałeś w swoim pytaniu (tekst obrócony), wierzę, że jedynym sposobem osiągnięcia tego jest użycie obrazów zamiast tekstów. Tak, wiem, że to oszukiwanie, szczególnie jeśli twoje stoły będą dynamiczne, a teksty nagłówków będą ciągle się zmieniać, to nie zadziała. Ale jeśli ta lista nie będzie zbyt dużo zmienić równie dobrze można użyć wizerunki, przykład:

można byłoby następnie dodać kolejny element wewnątrz komórki nagłówka i ustawić ten obraz jako tło i jego położenie Centrum IT:

<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; 
} 

przypadku korzystania z obrazów jako teksty nie zadziała, można chyba pętli tekstu i linii i przerwy po każdej literze następuje spacja i zwiększać go za każdym razem w sposób zstępujący:

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

To oczywiście nie obraca tekstu, ale ułatwi dopasowanie treści do nagłówka.

Nadzieję, że pomaga.