We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Export PDF

Thread ID:

Created:

Updated:

Platform:

Replies:

144652 May 15,2019 08:40 PM UTC May 21,2019 08:46 AM UTC Vue 3
loading
Tags: Data Grid
William Morgenweck
Asked On May 15, 2019 08:40 PM UTC

When I try to Export the grid using PDF it works fine if I limit the number of records that populate the Grid.  I have tried it with 50 records and it works fine.  If I let all of the data populate the grid in the area of 1000 rows it never does anything.  Also when I export the 50 rows all columns are equal width instead of the width of the grid column

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 17, 2019 09:04 AM UTC

Hi William, 
 
Greetings from Syncfusion support. 
 
Query: When I try to Export the grid using PDF it works fine if I limit the number of records that populate the Grid.  I have tried it with 50 records and it works fine.  If I let all of the data populate the grid in the area of 1000 rows it never does anything.  Also when I export the 50 rows all columns are equal width instead of the width of the grid column 
 
We have validated your query and checked the reported problem at our end. It works fine. Here, we have exported the grid with more than 1000 records. It exports all the records. Please find the below sample for your reference. 
 

And by default, all the column width in the pdf document is based on total width of the grid and number of columns in the grid. The width is calculated based on the width of the grid and number of columns in the grid and the same width(calculated) is applied to each columns of the grid. This is the default behavior of grid exporting. 

Please get back to us if you need further assistance. 

Regards,
Thavasianand S. 


William Morgenweck
Replied On May 17, 2019 11:07 AM UTC

Sorry-   

And by default, all the column width in the pdf document is based on total width of the grid and number of columns in the grid. The width is calculated based on the width of the grid and number of columns in the grid and the same width(calculated) is applied to each columns of the grid. This is the default behavior of grid exporting. 

That is not a very good solution. From the end users expectations they want a PDF document that looks like the original.  How can this be escalated to be fixed? Your competition renders a PDF with the same width of the Grid columns.

Currently this makes the export to PDF totally useless unless the Grid was originally designed with equal width columns.  

I will get back to you on the other problem of why it will not produce with a large dataset for me. 



Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 21, 2019 08:46 AM UTC

Hi William, 
 
Query: That is not a very good solution. From the end users expectations they want a PDF document that looks like the original.  How can this be escalated to be fixed? Your competition renders a PDF with the same width of the Grid columns. Currently this makes the export to PDF totally useless unless the Grid was originally designed with equal width columns.  
 
We have prepared a sample to generate a new pdf which will be created based on the Grid column width, by creating a table using PDF component, and populate that with the data from the Grid. Here, the downloaded pdf file have the same width as like in the grid columns. Please find the sample below,  
 
  
By using toolbarClick click event, we have created a separate table by using the PDF component. Then we have populated the created table with the data from the Grid. Please find the below code example for your reference,  

[code example] 
<template> 
    <div id="app"> 
        <ejs-grid id="Grid" 
                  :allowPdfExport="true" 
                  :toolbar="toolbar" 
                  :toolbarClick="clickHandler" 
                  :dataSource="data" 
                  :allowPaging="true" 
                  ref="grid"> 
            <e-columns> 
                ... 
           </e-columns> 
        </ejs-grid> 
    </div> 
</template> 
 
<script> 
... 
export default { 
  name: "App", 
  data() { 
    ... 
 methods: { 
    clickHandler: function(args) { 
      if (args.item.id === "pdfexport") { 
        var grid = document.getElementsByClassName("e-grid")[0] 
          .ej2_instances[0]; 
        var doc = new PdfDocument(); 
 
        doc.pageSettings.margins.all = 0; 
        doc.pageSettings.width = 700; 
        doc.pageSettings.pageMargins.topMargin = 40; 
        doc.pageSettings.pageMargins.rightMargin = 30; 
        doc.pageSettings.pageMargins.leftMargin = 30; 
 
        var page = doc.pages.add(); 
        var pdfGrid = new PdfGrid(); 
 
        var collength = grid.columns.length; 
        pdfGrid.columns.add(collength); 
 
        for (var i = 0; i < collength; i++) { 
          pdfGrid.columns.getColumn(i).width = parseInt(grid.columns[i].width); 
        } 
        pdfGrid.headers.add(1); 
        var pdfGridHeader = pdfGrid.headers.getHeader(0); 
        for (var j = 0; j < collength; j++) { 
          pdfGridHeader.cells.getCell(j).value = grid.columns[j].headerText; 
        } 
        var pdfGridRow1 = []; 
        for (var k = 0; k < grid.dataSource.length; k++) { 
          pdfGridRow1[k] = pdfGrid.gridRows.addRow(); 
        } 
        for (let k = 0; k < grid.dataSource.length; k++) { 
          for (let r = 0; r < grid.columns.length; r++) { 
            pdfGridRow1[k].cells.getCell(r).value = grid.dataSource[k][ 
              grid.columns[r].field 
            ].toString(); 
          } 
        } 
        pdfGrid.draw(page, 0, 0); 
        doc.save("output.pdf"); 
        doc.destroy(); 
      } 
    } 
  }, 
  provide: { 
    grid: [Toolbar, PdfExport, Page] 
  } 
}; 
</script> 
 
... 

Query: I will get back to you on the other problem of why it will not produce with a large dataset for me.   
 
For this query, could you please share the below details. It will be helpful to provide a better solution. 
 
  • Please share if any console error throws.
  • Bind actionFailure event to grid and share the details, if any error is throws.
  • Are you using local dataSource or remote dataSource.
  • If you are using remote dataSource, then please share adaptor details.
 
Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon