Export FlexGrid to PDF

To export FlexGrid controls to PDF, you should include two extra modules in your application:

  1. wijmo.pdf.js: Provides general methods for saving and loading PDF files.
  2. wijmo.grid.pdf.js: Contains the FlexGridPdfConverter class that uses wijmo.pdf.js to save FlexGrid controls as PDF.

To export a 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.

import * as grid from '@grapecity/wijmo.grid';
import * as pdf from '@grapecity/wijmo.pdf';
import * as gridPdf from '@grapecity/wijmo.grid.pdf';

gridPdf.FlexGridPdfConverter.export(theGrid, 'LearnWijmo.pdf', {
    maxPages: 10,
    scaleMode: gridPdf.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' }

You can also create the PDF manually and add the exported grid and any other information you might want. This is useful for gereating custom reports or documents that contain data from the grid.

// create the document
var doc = new pdf.PdfDocument({
    compress: true, 
    header: { declarative: { text: '\t&[Page]\\&[Pages]' } },
    ended: function (sender, args) {
        wijmo.pdf.saveBlob(args.blob, 'LearnWijmoDoc.pdf');

// add some content
doc.drawText('This is a FlexGrid control:');

// add the grid (400pt wide)
gridPdf.FlexGridPdfConverter.draw(theGrid, doc, 400);

// finish document