Print in ASP.NET Core Pivot Table

27 Aug 20264 minutes to read

The ASP.NET Core Pivot Table component supports print functionality, allowing users to print the current state of the pivot table or pivot chart. This feature enables users to generate hard copies of pivot table reports for convenient review and data sharing.

Call the print method on the underlying Grid instance to print the rendered pivot table. The Grid control captures the current state of the pivot table, including all applied filters, sorting, and formatting.

Pass options such as { pageSize: 'A4', orientation: 'landscape' } to the print() method to control the page size and orientation of the printed output.

<ejs-button id="print" content="Print" isPrimary="true"></ejs-button>
<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0"></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="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-datasourcesettings>
</ejs-pivotview>
<script>
    var pivotObj;
    document.getElementById('print').onclick = function () {
        pivotObj = document.getElementById('PivotView').ej2_instances[0];
        pivotObj.grid.print();
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

Call the print method on the underlying Chart instance to print the pivot chart. The Chart control preserves colors, legends, and data labels in the printed output.

Set the e-displayOption property to Chart or Both to display the pivot chart.

To enable pivot chart functionality, inject the PivotChart module into the pivot table.

<ejs-button id="print" content="Print" isPrimary="true"></ejs-button>
<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0"></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="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-datasourcesettings>
    <e-displayOption view="Chart"></e-displayOption>
</ejs-pivotview>
<script>
    var pivotObj;
    document.getElementById('print').onclick = function () {
        pivotObj = document.getElementById('PivotView').ej2_instances[0];
        pivotObj.chart.print();
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

See also