How to export Entity data to PDF?

Hi Folks,
Greetings!

I would like to convert or export entity data into PDF and download PDF, so kindly help me how to do this?


Thanks

There are a few options you can consider.

Or try to render the table records on the screen using CSS according to what you like to show on PDF, then use the browser's built-in export to PDF feature, as in print to PDF.

Hope this helps.

Solution

Hi Nuno Miguel Verdasca,

Thanks for your help.

My issue is resolved by using Kendo JS.

1.Paste following link text in expression
"<link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-material.min.css' /><link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.min.css' /><script src='https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js'></script>"


2. Added following code in Screen javaScript property

SyntaxEditor Code Snippet

function GeneratePDF(Container,fileName){    
   var style=$("#"+Container).find('.ProductPackTable').attr('style');
    // Convert the DOM element to a drawing using kendo.drawing.drawDOM
    kendo.drawing.drawDOM($("#"+Container))
    .then(function(group) {
         $("#"+Container).find('.ProductPackTable').attr('style',style);
        // Render the result as a PDF file
        return kendo.drawing.exportPDF(group, {
            paperSize: "auto",
            landscape: true,
            margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
        });
    })
    .done(function(data) {
        // Save the PDF file
        kendo.saveAs({
            dataURI: data,
            fileName: fileName+".pdf",
            proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
        });
    });
  
}



3. For download to created pdf, I have taken one button with one click action in Extended Properties and call following Text

SyntaxEditor Code Snippet

 "GeneratePDF('"+PDFCnt.Id+"','"+"Filename"+"');"


Cheers


Solution

Meer Imtiyaz wrote:

Hi Nuno Miguel Verdasca,

Thanks for your help.

My issue is resolved by using Kendo JS.

1.Paste following link text in expression
"<link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-material.min.css' /><link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.min.css' /><script src='https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js'></script>"


2. Added following code in Screen javaScript property

SyntaxEditor Code Snippet

function GeneratePDF(Container,fileName){    
   var style=$("#"+Container).find('.ProductPackTable').attr('style');
    // Convert the DOM element to a drawing using kendo.drawing.drawDOM
    kendo.drawing.drawDOM($("#"+Container))
    .then(function(group) {
         $("#"+Container).find('.ProductPackTable').attr('style',style);
        // Render the result as a PDF file
        return kendo.drawing.exportPDF(group, {
            paperSize: "auto",
            landscape: true,
            margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
        });
    })
    .done(function(data) {
        // Save the PDF file
        kendo.saveAs({
            dataURI: data,
            fileName: fileName+".pdf",
            proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
        });
    });
  
}



3. For download to created pdf, I have taken one button with one click action in Extended Properties and call following Text

SyntaxEditor Code Snippet

 "GeneratePDF('"+PDFCnt.Id+"','"+"Filename"+"');"


Cheers


Thank you Sir its Working 



Meer Imtiyaz wrote:

Hi Nuno Miguel Verdasca,

Thanks for your help.

My issue is resolved by using Kendo JS.

1.Paste following link text in expression
"<link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-material.min.css' /><link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.min.css' /><script src='https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js'></script>"


2. Added following code in Screen javaScript property

SyntaxEditor Code Snippet

function GeneratePDF(Container,fileName){    
   var style=$("#"+Container).find('.ProductPackTable').attr('style');
    // Convert the DOM element to a drawing using kendo.drawing.drawDOM
    kendo.drawing.drawDOM($("#"+Container))
    .then(function(group) {
         $("#"+Container).find('.ProductPackTable').attr('style',style);
        // Render the result as a PDF file
        return kendo.drawing.exportPDF(group, {
            paperSize: "auto",
            landscape: true,
            margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
        });
    })
    .done(function(data) {
        // Save the PDF file
        kendo.saveAs({
            dataURI: data,
            fileName: fileName+".pdf",
            proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
        });
    });
  
}



3. For download to created pdf, I have taken one button with one click action in Extended Properties and call following Text

SyntaxEditor Code Snippet

 "GeneratePDF('"+PDFCnt.Id+"','"+"Filename"+"');"


Cheers


You don't have to thank me, I'm happy to be able to help. (",)


The code is not working not able to see the data 

Hi,


1.Paste following link text in expression
"<link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-material.min.css' /><link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.min.css' /><script src='https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js'></script>"


2. Added following code in Screen javaScript property

SyntaxEditor Code Snippet

function GeneratePDF(Container,fileName){    
   var style=$("#"+Container).find('.ProductPackTable').attr('style');
    // Convert the DOM element to a drawing using kendo.drawing.drawDOM
    kendo.drawing.drawDOM($("#"+Container))
    .then(function(group) {
         $("#"+Container).find('.ProductPackTable').attr('style',style);
        // Render the result as a PDF file
        return kendo.drawing.exportPDF(group, {
            paperSize: "auto",
            landscape: true,
            margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
        });
    })
    .done(function(data) {
        // Save the PDF file
        kendo.saveAs({
            dataURI: data,
            fileName: fileName+".pdf",
            proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
        });
    });
  
}



3. For download to created pdf, I have taken one button with one click action in Extended Properties and call following Text

SyntaxEditor Code Snippet

 "GeneratePDF('"+PDFCnt.Id+"','"+"Filename"+"');"


I have tried the above code in my application ,It is working but it is downloading only few data's of the entity.Can anyone help me to download whole entity data's as pdf.

               

I have attached screenshot for your reference.



Thanks,

Abinaya

Abinaya Chinnadurai wrote:

Hi,


1.Paste following link text in expression
"<link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-material.min.css' /><link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.min.css' /><script src='https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js'></script>"


2. Added following code in Screen javaScript property

SyntaxEditor Code Snippet

function GeneratePDF(Container,fileName){    
   var style=$("#"+Container).find('.ProductPackTable').attr('style');
    // Convert the DOM element to a drawing using kendo.drawing.drawDOM
    kendo.drawing.drawDOM($("#"+Container))
    .then(function(group) {
         $("#"+Container).find('.ProductPackTable').attr('style',style);
        // Render the result as a PDF file
        return kendo.drawing.exportPDF(group, {
            paperSize: "auto",
            landscape: true,
            margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
        });
    })
    .done(function(data) {
        // Save the PDF file
        kendo.saveAs({
            dataURI: data,
            fileName: fileName+".pdf",
            proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
        });
    });
  
}



3. For download to created pdf, I have taken one button with one click action in Extended Properties and call following Text

SyntaxEditor Code Snippet

 "GeneratePDF('"+PDFCnt.Id+"','"+"Filename"+"');"


I have tried the above code in my application ,It is working but it is downloading only few data's of the entity.Can anyone help me to download whole entity data's as pdf.

               

I have attached screenshot for your reference.



Thanks,

Abinaya

Hi Abinaya,

Go to the link below.

https://demos.telerik.com/kendo-ui/grid/pdf-export

The link has an example where the data is got from a service. and instead of generating a pdf of the current screen with the few data, it gives an example where you are creating a template for the pdf to be generated and the data source is got from a service, in this way you can get the entire data from the entity. the code needs to be altered such that it suits for your screen in outsystems.


Hope this solves your issue.


Abinaya Chinnadurai wrote:

Hi,


1.Paste following link text in expression
"<link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-material.min.css' /><link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.min.css' /><script src='https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js'></script>"


2. Added following code in Screen javaScript property

SyntaxEditor Code Snippet

function GeneratePDF(Container,fileName){    
   var style=$("#"+Container).find('.ProductPackTable').attr('style');
    // Convert the DOM element to a drawing using kendo.drawing.drawDOM
    kendo.drawing.drawDOM($("#"+Container))
    .then(function(group) {
         $("#"+Container).find('.ProductPackTable').attr('style',style);
        // Render the result as a PDF file
        return kendo.drawing.exportPDF(group, {
            paperSize: "auto",
            landscape: true,
            margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
        });
    })
    .done(function(data) {
        // Save the PDF file
        kendo.saveAs({
            dataURI: data,
            fileName: fileName+".pdf",
            proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
        });
    });
  
}



3. For download to created pdf, I have taken one button with one click action in Extended Properties and call following Text

SyntaxEditor Code Snippet

 "GeneratePDF('"+PDFCnt.Id+"','"+"Filename"+"');"


I have tried the above code in my application ,It is working but it is downloading only few data's of the entity.Can anyone help me to download whole entity data's as pdf.

               

I have attached screenshot for your reference.



Thanks,

Abinaya

 Hi,
Greetings!

Sorry for delay!

Please replace by below function

function GeneratePDF(Container,fileName){      
         kendo.drawing.drawDOM($("#"+Container), {
         paperSize: "auto",
}).then(function(group){
        kendo.drawing.pdf.saveAs(group, fileName+".pdf");
});
}

 

Cheer's.... :)

Hi ,

  Thank you everyone ,let me try it out the same in my application .


Thanks,

Abinaya

Hi Folks,

Your solution helped in achieving my requirement. But when we have horizontal scroll then whatever number of column are displaying on screen, it is exporting that only. Its not exporting whole data .

Please let me know if you need any more details.

Example below: its exporting column till reimbursement column only.