Search results

PDF Exporting in ASP.NET MVC Pivot Grid control

14 Oct 2021 / 3 minutes to read

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
Copied to clipboard
@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>
Copied to clipboard
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
Copied to clipboard
@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>
Copied to clipboard
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.

Copied to clipboard
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
Copied to clipboard
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.
Copied to clipboard
 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
Copied to clipboard
@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
Copied to clipboard
@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>
Copied to clipboard
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
Copied to clipboard
@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>
Copied to clipboard
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
Copied to clipboard
@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>
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

See Also