Export to PDF

To export FlexGrid to PDF, call the FlexGridPdfConverter.export method and provide a reference to the grid that will be exported, the file name, and extra options to define the page format, headers and footers, and styles.

Country

Sales

Expenses

81,732.54

38,401.13

Germany

20,603.32

27,944.24

44,217.79

48,877.49

Japan

29,190.63

23,365.74

Italy

46,951.19

49,107.56

Greece

86,237.02

49,767.35

// This file locates: "Scripts/Lesson/C1FlexGrid/Pdf.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // export grid to PDF
    document.getElementById('btnExport').addEventListener('click', function () {
        wijmo.grid.pdf.FlexGridPdfConverter.export(theGrid, 'LearnMvcClient.pdf', {
            maxPages: 10,
            scaleMode: wijmo.grid.pdf.ScaleMode.PageWidth,
            documentOptions: {
                compress: true,
                header: { declarative: { text: '\t&[Page] of &[Pages]' } },
                footer: { declarative: { text: '\t&[Page] of &[Pages]' } },
                info: { author: 'C1', title: 'Learn Wijmo' }
            },
            styles: {
                cellStyle: { backgroundColor: '#ffffff', borderColor: '#c6c6c6' },
                altCellStyle: { backgroundColor: '#f9f9f9' },
                groupCellStyle: { backgroundColor: '#dddddd' },
                headerCellStyle: { backgroundColor: '#eaeaea' }
            }
        });
    });
 
    // create a PDF document with the grid and some other content
    document.getElementById('btnCreateDoc').addEventListener('click', function () {
 
        // create the document
        var doc = new wijmo.pdf.PdfDocument({
            compress: true,
            header: { declarative: { text: '\t&[Page]\\&[Pages]' } },
            ended: function (sender, args) {
                wijmo.pdf.saveBlob(args.blob, 'LearnMvcClientDoc.pdf');
            }
        });
 
        // add some content
        doc.drawText('This is a FlexGrid');
 
        // add the grid (400pt wide)
        wijmo.grid.pdf.FlexGridPdfConverter.draw(theGrid, doc, 400);
 
        // finish document
        doc.end();
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: Pdf
        public ActionResult Pdf()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.Pdf_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.Pdf_Text1)
</p>
 
<button id="btnExport" class="btn btn-default">
    @Html.Raw(Resources.C1FlexGrid.Pdf_Text2)
</button>
<button id="btnCreateDoc" class="btn btn-default">
    @Html.Raw(Resources.C1FlexGrid.Pdf_Text3)
</button>
 
@(Html.C1().FlexGrid().Id("theGrid")
    .Bind(Model)
    .AutoGenerateColumns(false)
    .Columns(cs =>
    {
        cs.Add().Binding("Id").Header("ID").Width("60");
        cs.Add().Binding("Country").Header("Country").Width("2*");
        cs.Add().Binding("Sales").Header("Sales").Width("*").Format("n2");
        cs.Add().Binding("Expenses").Header("Expenses").Width("*").Format("n2");
    })
    .Height(250)
    .Filterable() // add a filter to show that it works while exporting
)