css - स्लेटेड हैडर के साथ पीडीएफ तालिका




pdf coldfusion (2)

क्या आप CF11 या ऊपर का उपयोग कर रहे हैं? यदि हां, तो लीगेसी <cfdocument> की बजाय बेहतर सीएसएस समर्थन के साथ <cfhtmltopdf> उपयोग करें।

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

मैं cfdocument का उपयोग करते हुए ColdFusion में पीडीएफ बना रहा हूँ। मुझे शीर्ष लेख पंक्ति के साथ तालिका बनाने की आवश्यकता है, इसलिए यह पृष्ठ पर सभी फिट बैठता है यहाँ मैं क्या करने की कोशिश कर रहा हूँ का एक उदाहरण है। मेरे पास अब तक कोई भी HTML या सीएसएस उदाहरण नहीं मिला है। अब मैं सोच रहा हूं कि यह एक ठगना है जो कोल्डफ्यूजन और / या पीडीएफ़ निर्माण के लिए विशिष्ट है। मुझे पता है कि यह कोड यहां एक समान प्रश्न के उत्तर से सीधे आया था, लेकिन यह मेरे पीडीएफ़ में लांछित स्तंभों के साथ एक टेबल नहीं बना रहा है यह इस बनाता है

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

मैं cfdoucment का उपयोग कर cfdoucment पीडीएफ दस्तावेजों को स्टाइल करने पर काम करता हूं और सीएसएस के साथ बहुत परेशानी होती है। इतने सारे फीचर्स समर्थित नहीं हैं जो कि पीडीएफ को इतनी आसानी से स्टाइल कर सकता है: CSS3 गुण, सीएसएस छद्म तत्व और यहां तक ​​कि !important टैग भी दुर्भाग्य से इस्तेमाल नहीं किया जा सकता।

हालांकि, पर्याप्त चाल और काम के आस-पास हैं जो आप (कुछ हद तक) अपने इच्छित परिणाम प्राप्त करने के लिए उपयोग कर सकते हैं, उन्हें आमतौर पर आपके मार्कअप को थोड़ा सा अनुकूलित करने की आवश्यकता होती है, यहां बताया गया है कि मैं आपकी समस्या को हल करने के बारे में कैसे जाना चाहूंगा:

सबसे पहले: सीमा वाली कक्षों / पंक्तियों के साथ तालिका प्राप्त करना सीएफ पीडीएफ़ के लिए सीएसएस के साथ एक मजेदार काम नहीं है। सीएसएस गुणों में से एक जो समर्थित नहीं है border-collapse: collapse; इसलिए यदि आप तालिकाओं का उपयोग करते हैं तो कक्षों, आदि के बीच रिक्त स्थान होंगे। आप एक मानक तालिका के लिए इस तरह से कुछ के साथ समाप्त होगा:

इसलिए मैं संभवत: आपकी पीडीएफ सामग्री के लिए <div> का उपयोग करके एक अलग मार्कअप उत्पन्न करूँगा और pdf-only पर प्रदर्शित करने और कहीं और छिपाने के लिए एक pdf-only कक्षा या कुछ जोड़ूंगा।

आपके प्रश्नों में 2 समस्याएं हैं जिन्हें सीएसएस की सीमा के कारण तय नहीं किया जा सकता है। 1) तिरछी लाइनें 2) ऊर्ध्वाधर तिरछा पाठ

1) तिरछा रेखाएं:

मैं पृष्ठभूमि की छवि (नीचे देखें) को शीर्ष लेख कोशिकाओं को जोड़कर और उन्हें कुछ अन्य सीएसएस कोड के साथ स्थानांतरित करने के लिए स्लेटेड ब्लॉकों को बनाने में सक्षम था, जो कि उम्मीद करना आसान है:

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

यहां सीएसएस के साथ पूर्ण मार्कअप है:

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

सीएसएस:

.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> उपयोग <cfdocument> )

ताकि झुका हुआ हेडर का ख्याल रखे

2) कार्यक्षेत्र पाठ

मैं 2 समाधानों के बारे में सोच सकता हूं, जिनमें से कोई भी आदर्श नहीं है, लेकिन फिर हम सीएफ़ पीडीएफ़ को स्टाइल कर रहे हैं इसलिए हमें रचनात्मक बनाना होगा।

आपके प्रश्न (घुमाए गए पाठ) में जो भी पोस्ट किया गया है, उसके लिए मैं समझता हूं कि इसे प्राप्त करने का एकमात्र तरीका ग्रंथों के बजाय छवियों का उपयोग कर रहा है। हाँ, मुझे पता है कि यह विशेष रूप से धोखाधड़ी है अगर आपकी टेबल गतिशील होने जा रही हैं, तो हेडर ग्रंथ लगातार बदल रहे हैं, यह काम नहीं करेगा। लेकिन अगर यह सूची बहुत ज्यादा नहीं बदलती है, तो आप छवियों का उपयोग भी कर सकते हैं, उदाहरण:

फिर आप अपने हेडर सेल के अंदर एक और तत्व जोड़ सकते हैं और उस छवि को पृष्ठभूमि और केंद्र की स्थिति में सेट कर सकते हैं:

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

यह स्पष्ट रूप से पाठ को घुमाए नहीं है, लेकिन यह शीर्ष लेख में सामग्री को फिट करना आसान बना देगा।

उम्मीद है की वो मदद करदे।





cfml