Smart Printing of Widgets

With Webix you have an ability to print widgets or parts of interfaces via compact and elegant API.

<link rel="stylesheet" href="../../codebase/webix.css" type="text/css">

Basic Principles

Printing abilities are available via the print() method shared among all Webix widgets. The method takes as parameters:

• view (object|id) - the object or id of the view to print
• options (object) - a set of printing options that define the appearance of the printed view.

// view obj
webix.print($$("datatable1")); 
// view id
webix.print("datatable1");

Related sample:  Datatable

Printing Options

You can easily configure printing settings by passing an object with necessary options as a second parameter of the print() method. There are common options for all widgets and specific options for data components.

Common options for all widgets

• paper (string) - paper size. Possible values are stored in the webix.env.printSizes array. The default value is "a4". If there is no object in the printSizes array with the id: "a4", the first one in the array will be used. 
• mode (string) - page orientation. Possible values are "portrait" (default), "landscape"
• margin (number, object) - margin for printed pages, can be of two types:
  • number - to set the same margin from all sides
  • object - with any of the properties: top, right, bottom, left containing number to set margins separately
• docHeader (string) - document header on the first page before the printed view (independent of the browser print header)
• docFooter (string) - document footer on the last page after the printed view (independent of the browser print header).

webix.print($$("mytable"), {mode:"landscape"});

Related sample:  Wide Datatable

Extended options for data components

For all data components

• scroll (boolean) if true, prints only a visible part of a scrolled component. false by default.

Related sample:  Dataview

Specific for DataTable, DataView and X-List

• fit (string) - adjusts printed component either to the page width ("page", default), or to the component width ("data").

Related sample:  Horizontal List

Specific for DataTable and SpreadSheet

• header (boolean) - renders header for datatable, if exists
  • true (default for datatable)
  • false (default for spreadsheet)
• skiprows (boolean) - skips empty rows within the datatable. false by default
• borderless (boolean) - removes borders for datatable cells. false by default
• trim - (boolean) - removes empty rows and columns on the edges of datatable. The possible values are:
  • true (default for spreadsheet)
  • false (default for datatable).
• data (string) - defines which data to print:
  • "selection" - selected data from the current sheet

Specific for DataTable only

• footer (boolean) - renders footer for datatable, if exists. true by default.

Specific for SpreadSheet only

• sheets (boolean|array|string) - defines which sheets to print. The possible values are:
  • boolean - set to true to print all the sheets
  • array - set an array with sheet IDs to print them
  • string - set sheet ID to print it
• sheetnames (boolean) - renders name of sheets for each table. True by default.
• external - (boolean) - if true, prints data from the additional views of the sheet

SpreadSheet is equipped with the printing user interface out of the box. Read more about it in the related SpreadSheet documentation.

Configuring Printing Environment

It is possible to specify the desired paper margins for printing by taking into account the rules described below.

We assume that the default ppi (pixel per inch) ratio is equal to 96 and the default paper margins take 75% of ppi. If you need to define other values for margins, you can change the corresponding env variables:

webix.env.printPPI = 96;
webix.env.printMargin = 96*0.75;

Also, margins can be set via the printing options. The priority is given to margins set via options.

Back to top