Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Unable to get the number in my pdf export

6 Answers 177 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Claudia
Top achievements
Rank 1
Claudia asked on 22 Mar 2017, 06:50 PM

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>

6 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 23 Mar 2017, 07:44 AM
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.
0
Claudia
Top achievements
Rank 1
answered on 23 Mar 2017, 02:38 PM
Thanks Ivan for your help. I will track the bug on Github.  
0
Claudia
Top achievements
Rank 1
answered on 24 Mar 2017, 02:15 PM

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>

0
Claudia
Top achievements
Rank 1
answered on 24 Mar 2017, 02:17 PM

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

.test {counter-reset: section;}

Thanks for your help

0
Claudia
Top achievements
Rank 1
answered on 24 Mar 2017, 02:21 PM
This is the way for Pdf's, but still not work properly.
0
Ivan Danchev
Telerik team
answered on 27 Mar 2017, 12:23 PM
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.
Tags
DropDownList
Asked by
Claudia
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Claudia
Top achievements
Rank 1
Share this question
or