Export of javascript grid to PDF with help of pdfmake

Export to PDF has been implemented to cover most possible use case scenarios with help of configuration encompassing both declarative options and imperative methods.

Top level flow diagram of PDF export process

grid.exportData(...) first converts grid data to js intermediate object and calls pq.exportPdf() internally to finally return document definition object. Document definition object is then included in document definition ( dd ) of whole page and exported to PDF with pdfMake.createPdf( dd ) method.

API

Most of the export to PDF configuration is based on parameters passed to exportData(...) method, and values of column.skipExport, column.exportRender, rowData.pq_hidden, rowData.pq_selected properties.

Header

When exporting data from a grid, the header of the grid is included in the export by default. The header typically contains the column names or titles that describe the data in each column.

If you want to exclude the header from the export, you can pass the parameter header: false when calling the exportData method. This will instruct the export process to skip exporting the header.

Additionally, you can use the eachCellHead callback parameter in the exportData method to modify the properties of each exported header cell. This callback allows you to alter various properties such as the text content, CSS styles, adding links, changing alignment, and more. By implementing this callback, you can customize the appearance and behavior of each header cell during the export process.

Similarly, there is an eachRowHead callback parameter available in the exportData method. This callback allows you to modify the CSS properties of every exported header row. You can use this callback to apply specific CSS styles to the header rows, such as changing the background color or font size, to achieve the desired look in the exported data.

In summary, the header of a grid is exported by default, but you can skip it by using header: false as a parameter. You can also utilize the eachCellHead and eachRowHead callback parameters to modify the properties and appearance of each header cell and row during the export process.

Columns

Columns with property skipExport set to true are visible in the grid but excluded from exported data. This property can be applied to normal as well as grouped columns via header menu UI. Such column header cells are highlighted in this example by setting the background-color to e.g., the first checkbox column.

Hidden columns are visible in the exported PDF document by default, they can be removed by passing skipHiddenColumns: true to exportData method.

Rows

Only selected rows or rows with property pq_rowselect: true can be exported by passing selection: 'row' parameter to exportData method.

Hidden rows are visible in the exported PDF document by default, they can be removed by passing skipHiddenRows: true to exportData method.

The eachRow callback parameter in the exportData method allows you to modify the CSS properties of each exported row. By using this callback, you can customize the styling of data rows during the export process.

Filtering

When exporting data, only the filtered rows are included in the export in case of default filtering. This means that if you have applied any filters to your data set, only the rows that match the filter criteria will be exported.

However, there is an exception to this behavior. If you have a configuration option called filterModel.hideRows set to true, which means that unfiltered rows are hidden rather than removed from data set, then unfiltered rows will also be included in the export.

To prevent the export of hidden or unfiltered rows when filterModel.hideRows is set to true, you can include the parameter skipHiddenRows: true when calling the exportData method. This tells the export process to exclude any rows that are currently hidden, regardless of whether they are unfiltered or not.

In summary, by default, only filtered rows are exported. However, when filterModel.hideRows is true, unfiltered rows are also exported unless you specify skipHiddenRows: true during the export process.

Cells

Cells data rowData[ dataIndx ] along with formatting and static styles are exported by default. To include the rendered values and styles returned by column.render callback ( if any ) for all columns, pass render: true to exportData method.

To include the rendered values of few columns only, don't pass render: true to exportData method, rather set column.exportRender to true for those columns. Vice versa to exclude the rendered or formatted values of few columns only, pass render: true to exportData method and set column.exportRender to false for those columns.

ui.Export is true inside the column.render callback to help render the cells differently in exported PDF document than in grid

There is an eachCell callback parameter to exportData method to alter properties ( text, link, css, style (used by pdfmake to apply common style to cells with default value of 'body'), alignment, rowSpan, colSpan or any other property from pdfmake ) of every exported cell.

if (rd.image) {
  // Convert to a valid URL
  rd.image = window.location.origin + "/pro2/content/images/" + rd.image;

  // Set the cell type to 'Pic'
  rd.pq_cellprop = {
    image: {
      inst: 'Pic'
    }
  };
}

Document definition of the grid

Document Definition is the javascript object representation of exported data which is used by pdfMake before final step of export to PDF.

Non English Unicode languages:

Export of non English languages to pdf is also supported, please check this example for it.

Third party libraries

Export to PDF functionality of ParamQuery grid is dependent upon following third party library:

• pdfmake

pdfmake library is included by 3 alternative ways:

• Set path to pdfmake html script tag

  <script src="path to pdfmake.min.js"></script>
  <script src="path to vfs_fonts.min.js"></script>

• npm i pdfmake

  and

  import pdfmake

• Load pdfmake dynamically.

  pq.getScripts(['path to pdfmake.min.js', 'path to vfs_fonts.min.js'], function () {    
      //download the pdf file where dd is document definition.
      pdfMake.createPdf( dd ).download();
  }

In order to get familiar with pdfmake document definition, please check:

• pdfmake documentation
• pdfmake examples