ASP.NET Core MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / PDF Export
In This Topic
    PDF Export
    In This Topic

    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:

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

    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

    PDFExportController.cs
    Copy Code
    public IActionResult Index()
    {
        return View(Sale.GetData(20));
    }
    

    View for the Controller

    Index.cshtml
    Copy Code
    @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>