Search results

PDF Exporting in ASP.NET Core Pivot Grid control

21 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.

tagHelper
Export.cs
Copied to clipboard
<ejs-button id="pdf" content="Pdf Export" isPrimary="true"></ejs-button>

<ejs-pivotview id="PivotGrid" height="300" allowPdfExport="true">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>

<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.

tagHelper
MultipleExport.cs
Copied to clipboard
<ejs-button id="pdf" content="Pdf Export" isPrimary="true"></ejs-button>

<ejs-pivotview id="PivotGrid" height="300" allowPdfExport="true">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>
<br />
<ejs-pivotview id="PivotGrid2" height="300" allowPdfExport="true">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-columns>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-columns>
        <e-rows>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-rows>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>

<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.

tagHelper
Copied to clipboard
<ejs-button id="pdf" content="Pdf Export" isPrimary="true"></ejs-button>

<ejs-pivotview id="PivotGrid" height="300" allowPdfExport="true">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>

<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.

tagHelper
PageLayout.cs
Copied to clipboard
<ejs-button id="pdf" content="Pdf Export" isPrimary="true"></ejs-button>

<ejs-pivotview id="PivotGrid" height="300" allowPdfExport="true">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>

<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
tagHelper
PageSize.cs
Copied to clipboard
<ejs-button id="pdf" content="Pdf Export" isPrimary="true"></ejs-button>

<ejs-pivotview id="PivotGrid" height="300" allowPdfExport="true">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>

<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.

tagHelper
ThemeExport.cs
Copied to clipboard
<ejs-button id="pdf" content="Pdf Export" isPrimary="true"></ejs-button>

<ejs-pivotview id="PivotGrid" height="300" allowPdfExport="true">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>

<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