Search results

PDF Export

PDF export allows exporting Pivot Grid data as PDF document. To enable PDF export in the pivot grid, set the allowPdfExport as true. You need to use the pdfExport method for PDF exporting.

razor
Export.cs
@Html.EJS().Button("pdf").Content("Pdf Export").IsPrimary(true).Render()

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).AllowPdfExport(true).Render()

<script>
    var pivotGridObj;
    document.getElementById('pdf').onclick = function () {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];
        pivotGridObj.pdfExport();
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Multiple pivot grid exporting

PDF export provides an option for exporting multiple pivot grids to same file. In this exported document, each pivot grid will be exported to new page of document in same file.

razor
MultipleExport.cs
@Html.EJS().Button("pdf").Content("Pdf Export").IsPrimary(true).Render()

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).AllowPdfExport(true).Render()
<br />
@Html.EJS().PivotView("PivotGrid2").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Columns(columns =>
{
    columns.Name("Country").Add(); columns.Name("Products").Add();
}).Rows(rows =>
{
    rows.Name("Year").Caption("Production Year").Add(); rows.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).AllowPdfExport(true).Render()
<script>
    var pivotGridObj; var pivotGridObj2;
    document.getElementById('pdf').onclick = function () {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];
        pivotGridObj2 = document.getElementById('PivotGrid2').ej2_instances[0];

        var firstGridPdfExport = pivotGridObj.grid.pdfExport({}, true);
        firstGridPdfExport.then(function (pdfData) {
            pivotGridObj2.pdfExport({}, false, pdfData);

        });
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Customization during PDF export

PDF export provides option to customize mapping of pivot grid to the exported PDF document.

You can customize text, page number, line, page size and changing orientation in header and footer.

How to write a text in header/footer

You can add text either in header or footer of the exported PDF document like in the below code example.

var pdfExportProperties = {
    header: {
        fromTop: 0,
        height: 130,
        contents: [
            {
                type: 'Text',
                value: "Northwind Traders",
                position: { x: 0, y: 50 },
                style: { textBrushColor: '#000000', fontSize: 13 }
            },

        ]
    }
}

How to draw a line in header/footer

You can add line either in header or footer of the exported PDF document like in the below code example.

Supported line styles:

  • dash
  • dot
  • dashdot
  • dashdotdot
  • solid
var pdfExportProperties = {
    header: {
        fromTop: 0,
        height: 130,
        contents: [
            {
                type: 'Line',
                style: { penColor: '#000080', penSize: 2, dashStyle: 'Solid' },
                points: { x1: 0, y1: 4, x2: 685, y2: 4 }
            }
        ]
    }
}

Add page number in header/footer

You can add page number either in header or footer of exported PDF document like in the below code example.

Supported page number types:

  • LowerLatin - a, b, c,
  • UpperLatin - A, B, C,
  • LowerRoman - i, ii, iii,
  • UpperRoman - I, II, III,
  • Number - 1,2,3.
 var pdfExportProperties = {
    header: {
        fromTop: 0,
        height: 130,
        contents: [
            {
                type: 'PageNumber',
                pageNumberType: 'Arabic',
                format: 'Page {$current} of {$total}', //optional
                position: { x: 0, y: 25 },
                style: { textBrushColor: '#ffff80', fontSize: 15, hAlign: 'Center' }
            }
        ]
    }
}

The below code illustrates the PDF export customization options.

razor
@Html.EJS().Button("pdf").Content("Pdf Export").IsPrimary(true).Render()

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).AllowPdfExport(true).Render()

<script>
    var pivotGridObj;
    document.getElementById('pdf').onclick = function () {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];

        var pdfExportProperties = {
            header: {
                fromTop: 0,
                height: 130,
                contents: [
                    {
                        type: 'Text',
                        value: "Pivot Grid",
                        position: { x: 0, y: 50 },
                        style: { textBrushColor: '#000000', fontSize: 13, dashStyle: 'Solid', hAlign: 'Center' }
                    }
                ]
            },
            footer: {
                fromBottom: 160,
                height: 150,
                contents: [
                    {
                        type: 'PageNumber',
                        pageNumberType: 'Arabic',
                        format: 'Page {$current} of {$total}',
                        position: { x: 0, y: 25 },
                        style: { textBrushColor: '#02007a', fontSize: 15 }
                    }
                ]
            }
        };
        pivotGridObj.pdfExport(pdfExportProperties);
    }
</script>

To change page orientation

Page orientation can be changed to “Landscape” (by default it’s “Portrait”) for the exported document using pdfExportProperties.

razor
PageLayout.cs
@Html.EJS().Button("pdf").Content("Pdf Export").IsPrimary(true).Render()

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).AllowPdfExport(true).Render()

<script>
    var pivotGridObj;
    document.getElementById('pdf').onclick = function () {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];

        var pdfExportProperties = {
            pageOrientation: 'Landscape'
        };
        pivotGridObj.pdfExport(pdfExportProperties);
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

To change page size

Page size can be customized for the exported document using pdfExportProperties. Supported page sizes are:

  • Letter
  • Note
  • Legal
  • A0
  • A1
  • A2
  • A3
  • A5
  • A6
  • A7
  • A8
  • A9
  • B0
  • B1
  • B2
  • B3
  • B4
  • B5
  • Archa
  • Archb
  • Archc
  • Archd
  • Arche
  • Flsa
  • HalfLetter
  • Letter11x17
  • Ledger
razor
PageSize.cs
@Html.EJS().Button("pdf").Content("Pdf Export").IsPrimary(true).Render()

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).AllowPdfExport(true).Render()

<script>
    var pivotGridObj;
    document.getElementById('pdf').onclick = function () {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];

        var pdfExportProperties = {
            pageSize: 'Letter'
        };
        pivotGridObj.pdfExport(pdfExportProperties);
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Theme

PDF export provides an option to include theme for exported PDF document.

To apply theme in exported PDF, define the theme in pdfExportProperties.

By default, material theme is applied to exported PDF document.

razor
ThemeExport.cs
@Html.EJS().Button("pdf").Content("Pdf Export").IsPrimary(true).Render()

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).AllowPdfExport(true).Render()

<script>
    var pivotGridObj;
    document.getElementById('pdf').onclick = function () {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];

        var pdfExportProperties = {
            theme: {
                header: {
                    fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold: true, borders: { color: '#64FA50', lineStyle: 'Thin' }
                },
                record: {
                    fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold: true
                },
                caption: {
                    fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold: true
                }
            }
        };
        pivotGridObj.pdfExport(pdfExportProperties);
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

See Also