PDF Export
2 Mar 202215 minutes to read
PDF export allows exporting Grid data to PDF document. You need to use the PdfExport method for exporting. To enable PDF export in the grid, set the allowPdfExport
as true.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPdfExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"PdfExport"})" allowPaging="true">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" width="140" format="yMd"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function toolbarClick(args) {
var gridObj = document.getElementById("Grid").ej2_instances[0];
if (args.item.id === 'Grid_pdfexport') {
gridObj.pdfExport();
}
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Show spinner while exporting
You can show/ hide spinner component while exporting the grid using showSpinner/ hideSpinner methods. You can use toolbarClick
event to show spinner before exporting and hide a spinner in the pdfExportComplete
or excelExportComplete
event after the exporting.
In the toolbarClick
event, based on the parameter args.item.id as Grid_pdfexport or Grid_excelexport we can call the showSpinner method from grid instance.
In the pdfExportComplete
or excelExportComplete
events, We can call the hideSpinner
method.
In the below demo, we have rendered the default spinner component when exporting the grid.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPdfExport="true" allowExcelExport="true" toolbarClick="toolbarClick" pdfExportComplete="pdfExportComplete" excelExportComplete="excelExportComplete" toolbar="@(new List<string>() {"PdfExport", "ExcelExport"})" allowPaging="true">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" visible="false" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" width="140" format="yMd"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function toolbarClick(args) {
var gridObj = document.getElementById("Grid").ej2_instances[0];
if (args.item.id === 'Grid_pdfexport') {
gridObj.showSpinner();
gridObj.pdfExport();
}
else if (args.item.id === 'Grid_excelexport') {
gridObj.showSpinner();
gridObj.excelExport();
}
}
function pdfExportComplete(args) {
this.hideSpinner();
}
function excelExportComplete(args) {
this.hideSpinner();
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Custom data source
PDF export provides an option to define datasource dynamically before exporting. To export data dynamically, define the dataSource in exportProperties.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPdfExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"PdfExport"})" allowPaging="true">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" format="C2" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140" ></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function toolbarClick(args) {
var gridObj = document.getElementById("Grid").ej2_instances[0];
if (args.item.id === 'Grid_pdfexport') {
var data = [
{ OrderID: "100", CustomerID: "Vinet", Freight: "2.00", OrderDate: new Date() },
{ OrderID: "101", CustomerID: "Hanar", Freight: "2.01", OrderDate: new Date() },
{ OrderID: "102", CustomerID: "Mega", Freight: "4.48", OrderDate: new Date() },
{ OrderID: "103", CustomerID: "Sam", Freight: "19.23", OrderDate: new Date() }
];
var pdfExportProperties = {
dataSource: data
};
gridObj.pdfExport(pdfExportProperties);
}
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Passing additional parameters to the server when exporting
You can pass the additional parameter in the query
property by invoking addParams method. In the toolbarClick
event, you can define params as key and value pair so it will receive at the server side when exporting.
In the below example, we have passed recordcount as 12 using addParams method.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPdfExport="true" allowExcelExport="true" toolbarClick="toolbarClick" pdfExportComplete="pdfExportComplete" excelExportComplete="excelExportComplete" toolbar="@(new List<string>() {"PdfExport", "ExcelExport"})" allowPaging="true">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" visible="false" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" width="140" format="yMd"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
var queryClone;
function toolbarClick(args) {
var gridObj = document.getElementById("Grid").ej2_instances[0];
if (args.item.id === 'Grid_pdfexport') {
queryClone = gridObj.query;
gridObj.query = new ej.data.Query().addParams("recordcount", "12");
gridObj.pdfExport();
}
else if (args.item.id === 'Grid_excelexport') {
queryClone = gridObj.query;
gridObj.query = new ej.data.Query().addParams("recordcount", "12");
gridObj.excelExport();
}
}
function pdfExportComplete(args) {
this.query = queryClone;
}
function excelExportComplete(args) {
this.query = queryClone;
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Export large number of columns in a single page
By default, when the grid has large number of columns, then the PDF export will split more pages for the exceeded columns rendering. To achieve large number of columns exported in a single page, you need to set the allowHorizontalOverFlow property as false in the toolbarClick
event.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPdfExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"PdfExport"})" allowPaging="true">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" width="140"></e-grid-column>
<e-grid-column field="EmployeeID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="OrderDate" width="140"></e-grid-column>
<e-grid-column field="Freight" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="ShipCity" width="140"></e-grid-column>
<e-grid-column field="Verified" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="ShipName" width="140" ></e-grid-column>
<e-grid-column field="ShipCountry" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="ShippedDate" width="140"></e-grid-column>
<e-grid-column field="ShipAddress" textAlign="Right" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function toolbarClick(args) {
let pdfDocument = new ej.pdfexport.PdfDocument();
let page = pdfDocument.pages.add();
var grid = document.getElementById('Grid').ej2_instances[0];
var pdfGrid = new ej.pdfexport.PdfGrid();
pdfGrid.style.allowHorizontalOverflow = false;
let format = new ej.pdfexport.PdfLayoutFormat();
var collength = grid.columns.length;
pdfGrid.columns.add(collength);
pdfGrid.headers.add(1);
var pdfGridHeader = pdfGrid.headers.getHeader(0);
for (let j = 0; j < collength; j++) {
pdfGridHeader.cells.getCell(j).value = grid.columns[j].headerText;
}
let pdfGridRow1 = [];
for (let k = 0; k < grid.dataSource.length; k++) {
pdfGridRow1[k] = pdfGrid.rows.addRow();
}
for (let k = 0; k < grid.dataSource.length; k++) {
for (let r = 0; r < grid.columnModel.length; r++) {
pdfGridRow1[k].cells.getCell(r).value = grid.dataSource[k][grid.columnModel[r].field].toString();
}
}
pdfGrid.draw(page, new ej.pdfexport.PointF(0, 0), format);
pdfDocument.save('output.pdf');
pdfDocument.destroy();
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}