Unable to get the number in my pdf export

7 posts, 0 answers
  1. Claudia
    Claudia avatar
    6 posts
    Member since:
    Feb 2017

    Posted 22 Mar 2017 Link to this post

    I am using css to increase the numeration but when I export to PDF the number doesn't appear.

    Example

    1 Section

    1.1 Subsection

    1.1.1 Standards

    by in the PDF their appear like that:

    0 Section

    0.0 Subsection

    0.0.0 Standards

     

    this is the code I used

    <!DOCTYPE html>
    <html>
    <head>
        
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        
      
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
    </head>
    <body>
    <div id="example" class="content-wrapper">
     
          <div class="box wide hidden-on-narrow">
              <h4>Export page content</h4>
              <div class="box-col">
                  <button class='export-pdf k-button'>Export as PDF</button>
              </div>
          </div>
                
        <main>
            <section class="row foodSect">
              <div class="section">
    <h1 class="col-md-5">FOOD TRACEABILITY</h1>

    <!-- SUBSECTION 2.1-->
    <div class="col-md-12 subsections">
    <h2 class="col-md-4">FOOD TRACEABILITY</h2>

    <!-- STANDARDS 2.1.1-->
    <div class="col-md-12 standards">
    <h3 class="col-md-5">Traceability Systems for Receiving Food </h3>
    </div><!-- end standards 2.1.1-->
    </div><!-- end subsection 2.1-->
    </div>
            </section>
        </main>

    <style>
        
     .foodSect {counter-reset: section;}

      .foodSect h1 {counter-reset: subsection;}

    .foodSect h2 {counter-reset: standards;}

    .foodSect h3 {
    font-size: 0.944em;
    margin: 9px auto;
    padding-left: 30px;
    float: left;
    }

    .foodSect h1:before {
    counter-increment: section;
        content: counter(section) " ";
    }

    .foodSect h2:before {
    counter-increment: subsection;
        content: counter(section) "." counter(subsection) " ";
    }

    .foodSect h3:before {
    counter-increment: standards;
        content: counter(section) "." counter(subsection) "." counter(standards) " ";
    }
    </style>

    <script>
        // Import DejaVu Sans font for embedding

        // NOTE: Only required if the Kendo UI stylesheets are loaded
        // from a different origin, e.g. cdn.kendostatic.com
        kendo.pdf.defineFont({
            "DejaVu Sans"             : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
            "DejaVu Sans|Bold"        : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
            "DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "DejaVu Sans|Italic"      : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
        });
    </script>

    <!-- Load Pako ZLIB library to enable PDF compression -->


    <script>
    $(document).ready(function() {

        $(".export-pdf").click(function() {
            // Convert the DOM element to a drawing using kendo.drawing.drawDOM
            kendo.drawing.drawDOM($("#example"),{
            multiPage: true,
                  paperSize: [1100, 1430], 
                  landscape:true,
                  date:true,
                  page:true,
                  title: true,
                  author:true,
                  margin: {left: "1cm", top: "1cm", right: "1cm", bottom: "1cm"}
            })
            .then(function(group) {
                // Render the result as a PDF file
                return kendo.drawing.exportPDF(group);
            })
            .done(function(data) {
                // Save the PDF file
                kendo.saveAs({
                    dataURI: data,
                    fileName: "HR-Dashboard.pdf",
                    proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                });
            });
        });

       });
    </script>



    </body>
    </html>

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1749 posts

    Posted 23 Mar 2017 Link to this post

    Hello Claudia,

    We logged the behavior in question as a bug in our public Github repo. Here's a link to the issue, through which you can track the bug's status.

    I updated your Telerik points for reporting this issue.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Claudia
    Claudia avatar
    6 posts
    Member since:
    Feb 2017

    Posted 23 Mar 2017 in reply to Ivan Danchev Link to this post

    Thanks Ivan for your help. I will track the bug on Github.  
  4. Claudia
    Claudia avatar
    6 posts
    Member since:
    Feb 2017

    Posted 24 Mar 2017 Link to this post

    Hi, the counter numbers is working, but not when you use  multi-page property. As soon it break the page the numbers start to count again.

    This dojo exemple

     

    <!DOCTYPE html>
    <html>
    <head>
        <base href="https://demos.telerik.com/kendo-ui/pdf-export/index">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-bootstrap.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.bootstrap.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.bootstrap.mobile.min.css" />

        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
     <style>
          
      .test {counter-reset: section;}

      .test h1 {counter-reset: subsection;counter-increment: section;}

      .test h2 {counter-reset: standards;counter-increment: subsection;}

      .test h3 {
        counter-increment: standards;
      font-size: 0.944em;
      margin: 9px auto;
      padding-left: 30px;
      float: left;
      }

      .test h1:before {
      
          content: counter(section) " ";
      }

      .test h2:before {
      
          content: counter(section) "." counter(subsection) " ";
      }

      .test h3:before {
      
          content: counter(section) "." counter(subsection) "." counter(standards) " ";
      }
    </style>
    </head>
    <body>
    <div id="example">
        <div class="box wide hidden-on-narrow">
            <h4>Export page content</h4>
            <div class="box-col">
                <button class='export-pdf k-button'>Export as PDF</button>
            </div>
        </div>

        <div class="demo-section k-content export-app wide hidden-on-narrow">
            <div class="demo-section content-wrapper wide">
             <section class="test">
              <div class="section">
              <h1 class="col-md-5">One</h1>

              <div class="col-md-12 subsections"></br>
                <h2 class="col-md-4">Two</h2>

              <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
              </div>
                <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
              </div>
                <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
                  </div>
              </div>
                
                <div class="col-md-12 subsections"><br/>
                  <h2 class="col-md-4">Two</h2>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  
                </div>
                <div class="col-md-12 subsections"><br/>
                  <h2 class="col-md-4">Two</h2>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  
                </div>
              </div>
               <div class="section">
              <h1 class="col-md-5">One</h1>

              <div class="col-md-12 subsections">
                <h2 class="col-md-4">Two</h2>

              <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
              </div>
                <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
              </div>
                <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
                  </div>
                <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
              </div>
              </div>
                <div class="col-md-12 subsections"><br/>
                  <h2 class="col-md-4">Two</h2>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  
                </div>
                <div class="col-md-12 subsections"><br/>
                  <h2 class="col-md-4">Two</h2>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  
                </div>
                <div class="col-md-12 subsections"><br/>
                  <h2 class="col-md-4">Two</h2>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  
                </div>
              </div>
               <div class="section">
              <h1 class="col-md-5">One</h1>

              <div class="col-md-12 subsections">
                <h2 class="col-md-4">Two</h2>

              <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
              </div>
                <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
              </div>
                <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
                  </div>
                <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
              </div>
              </div>
                <div class="col-md-12 subsections"><br/>
                  <h2 class="col-md-4">Two</h2>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  
                </div>
                <div class="col-md-12 subsections"><br/>
                  <h2 class="col-md-4">Two</h2>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  
                </div>
                <div class="col-md-12 subsections"><br/>
                  <h2 class="col-md-4">Two</h2>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  
                </div>
              </div>
               <div class="section">
              <h1 class="col-md-5">One</h1>

              <div class="col-md-12 subsections">
                <h2 class="col-md-4">Two</h2>

              <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
              </div>
                <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
              </div>
                <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
                  </div>
                <div class="col-md-12 standards">
              <h3 class="col-md-5">Three </h3>
              </div>
              </div>
                <div class="col-md-12 subsections"><br/>
                  <h2 class="col-md-4">Two</h2>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  
                </div>
                <div class="col-md-12 subsections"><br/>
                  <h2 class="col-md-4">Two</h2>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  
                </div>
                <div class="col-md-12 subsections"><br/>
                  <h2 class="col-md-4">Two</h2>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  <div class="col-md-12 standards">
                    <h3 class="col-md-5">Three </h3>
                  </div>
                  
                </div>
              </div>
            </section>
            </div>
        </div>
    </div>

    <script src="https://kendo.cdn.telerik.com/2017.1.223/js/pako_deflate.min.js"></script>

    <script>
    $(document).ready(function() {
        $(".export-pdf").click(function() {
            // Convert the DOM element to a drawing using kendo.drawing.drawDOM
            kendo.drawing.drawDOM($(".content-wrapper"),{
                                  multiPage: true,
    paperSize: [1100, 1430],
    landscape: true,
    date: true,
    page: true,
    title: true,
    author: true,
    margin: {left: "1cm", top: "1cm", right: "1cm", bottom: "3cm"}})
            .then(function(group) {
                // Render the result as a PDF file
                return kendo.drawing.exportPDF(group);
            })
            .done(function(data) {
                // Save the PDF file
                kendo.saveAs({
                    dataURI: data,
                    fileName: "TestExport.pdf",
                    proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                });
            });
        });
    });
    </script>

    </body>
    </html>

  5. Claudia
    Claudia avatar
    6 posts
    Member since:
    Feb 2017

    Posted 24 Mar 2017 Link to this post

    I found the solution. It has to deleted this value in CSS

    .test {counter-reset: section;}

    Thanks for your help

  6. Claudia
    Claudia avatar
    6 posts
    Member since:
    Feb 2017

    Posted 24 Mar 2017 in reply to Claudia Link to this post

    This is the way for Pdf's, but still not work properly.
  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1749 posts

    Posted 27 Mar 2017 Link to this post

    Hi Claudia,

    I updated the Github issue with the new information you provided on multi-page export.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top