FlexGrid supports exporting the grid content to a PDF file. You can use the FlexGridPdfConverter, a PDFKit-based JavaScript library, to export FlexGrid to PDF (Portable Document Format) without using any server-side code. To export FlexGrid to a PDF, you need to use the FlexGridPdfConverter.export function that takes the following arguments:

• embeddedFonts: Provides information to the export library, about various custom fonts to be embedded, such as URL, name, style, weight.
• styles: It is used to set up the style for the grid elements and link them with the embedded fonts.
• Export settings.

In the following example, we have set the following export settings:

• scaleMode: Determines how the FlexGrid content should be scaled in order to fit the page.
• orientation: Determines the orientation of pages.
• version: Determines the PDF version.
• exportMode: Determines which part of the FlexGrid should be exported (all of the data or only the current selection).

You can also specify some security settings, such as a separate user password and owner password. In addition, you can also define permissions for the PDF document including Annotating, ContentAccessibility, Copying, DocumentAssembly, FillingForms, Modifying, and Printing. You can refer to the FlexGrid PDF Export product sample for experiencing how the MVC FlexGrid control supports security settings in PDF Export.

Moreover, you can also create and add tags in the FlexGrid cells when exporting the grid to a PDF file. You can use the tag method to create tags and addTag method to add tags to the logical document tree of your application. Note that tagged PDF file required document version 1.4 or higher. For more information, refer to the FlexGrid PDF Export product sample to understand how the MVC FlexGrid control supports tags in PDF Export.

The following example shows how you can export FlexGrid to PDF. The example uses Sale.cs model added in the Custom Editors topic.

Controller

public IActionResult Index()
{
    return View(Sale.GetData(20));
}

View for the Controller

@using FlexGrid_Core.Models
@model IEnumerable<Sale>

<style type="text/css">
    .grid {
        height: 500px;
        border: 2px solid #e0e0e0;
        font-family: Cambria;
        font-weight: bold;
    }
</style>


@section Scripts{
    <script>
        c1.documentReady(function () {
            var grid = wijmo.Control.getControl('#fgrid');
            //Pdf
            document.getElementById("btnExportToPDF").addEventListener("click", function () {
                wijmo.grid.pdf.FlexGridPdfConverter.export(grid, 'ExportedFlexGrid.pdf', {
                    exportMode: wijmo.grid.pdf.ExportMode.All,
                    scaleMode: wijmo.grid.pdf.ScaleMode.ActualSize,
                    orientation: wijmo.pdf.PdfPageOrientation.Portrait,
                    version: "v1_3"
                });
            });
        });
    </script>
}

<div>
    <button id="btnExportToPDF" class="btn btn-default">
        Export To PDF
    </button>
    <br />
    <br />
    <c1-flex-grid id="fgrid" auto-generate-columns="false" width="700px" class="grid"
                  allow-add-new="true" selection-mode="Cell">
        <c1-items-source source-collection="@Model"></c1-items-source>
        <c1-flex-grid-column binding="ID"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Start"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
    </c1-flex-grid>
</div>