Class PrintPreview

Implements printing of a diagram across multiple pages.

The following opens a print preview for an existing graph:

const preview = new PrintPreview(graph);
preview.open();

Use getScaleForPageCount as follows in order to print the graph across a given number of pages:

const pageCount = window.prompt('Enter page count', '1');
if (pageCount) {
  const scale = printUtils.getScaleForPageCount(pageCount, graph);
  const preview = new PrintPreview(graph, scale);
  preview.open();
}

Additional pages

To add additional pages before and after the output, getCoverPages and getAppendices can be used, respectively.

const preview = new PrintPreview(graph, 1);

preview.getCoverPages = function(w, h) {
  return [this.renderPage(w, h, 0, 0, (div) => {
    div.innerHTML = '<div style="position:relative;margin:4px;">Cover Page</p>'
  }];
};

preview.getAppendices = function(w, h) {
  return [this.renderPage(w, h, 0, 0, (div) => {
    div.innerHTML = '<div style="position:relative;margin:4px;">Appendix</p>'
  }];
};
preview.open();

CSS

The CSS from the original page is not carried over to the print preview. To add CSS to the page, use the css argument in the open function or override writeHead to add the respective link tags as follows:

const writeHead = preview.writeHead;
preview.writeHead = function(doc: Document, css: string | null): void {
  writeHead.apply(this, [doc, css]);
  doc.writeln('<link rel="stylesheet" type="text/css" href="style.css">');
};

Padding

To add a padding to the page in the preview (but not the print output), use the following code:

preview.writeHead = function(doc: Document, css: string | null): void {
  writeHead.apply(this, [doc, css]);

  doc.writeln('<style type="text/css">');
  doc.writeln('@media screen {');
  doc.writeln('  body > div { padding-top:30px;padding-left:40px;box-sizing:content-box; }');
  doc.writeln('}');
  doc.writeln('</style>');
};

Headers

Apart from setting the title argument in the PrintPreview constructor you can override renderPage as follows to add a header to any page:

const renderPage = printPreview.renderPage;
printPreview.renderPage = function(w, h, x, y, content, pageNumber) {
  const div = renderPage.apply(this, [w, h, x, y, content, pageNumber]);

  const header = document.createElement('div');
  header.style.position = 'absolute';
  header.style.top = '0px';
  header.style.width = '100%';
  header.style.textAlign = 'right';
  domUtils.write(header, 'Your header here');
  div.firstChild.appendChild(header);

  return div;
};

The pageNumber argument contains the number of the current page, starting at

  1. To display a header on the first page only, check pageNumber and add a vertical offset in the constructor call for the height of the header.

Page Format

For landscape printing, use PAGE_FORMAT_A4_LANDSCAPE as the pageFormat in getScaleForPageCount and PrintPreview. Keep in mind that one can not set the defaults for the print dialog of the operating system from JavaScript so the user must manually choose a page format that matches this setting.

You can try passing the following CSS directive to open to set the page format in the print dialog to landscape. However, this CSS directive seems to be ignored in most major browsers, including IE.

@page {
  size: landscape;
}

Constructors

constructor

Properties

autoOrigin backgroundColor border borderColor clipping graph marginBottom marginTop pageCount pageFormat pageSelector printBackgroundImage printControls printOverlays scale targetWindow title wnd x0 y0

Methods

addGraphFragment addPageBreak appendGraph close closeDocument createPageSelector getAppendices getCoverPages getDoctype getLinkForCellState getRoot getWindow insertBackgroundImage open print renderPage useCssTransforms writeHead writePostfix

Constructors

constructor

  • new PrintPreview(graph, scale?, pageFormat?, border?, x0?, y0?, borderColor?, title?, pageSelector?): PrintPreview

  • Parameters

    • graph: Graph
    • scale: null | number = null
    • pageFormat: null | Rectangle = null
    • border: null | number = null
    • x0: number = 0
    • y0: number = 0
    • borderColor: null | string = null
    • title: string = 'Printer-friendly version'
    • pageSelector: null | boolean = null

    Returns PrintPreview

Properties

autoOrigin

autoOrigin: boolean = true

Specifies if the origin should be automatically computed based on the top, left corner of the actual diagram contents. The required offset will be added to x0 and y0 in open.

Default

true

backgroundColor

backgroundColor: string = '#ffffff'

Holds the color value for the page background color.

Default

'#ffffff'

border

border: number = 0

The border inset around each side of every page in the preview. This is set to 0 if autoOrigin is false.

Default

0

borderColor

borderColor: null | string

Holds the color value for the page border.

clipping

clipping: boolean = true

Specifies is clipping should be used to avoid creating too many cell states in large diagrams. The bounding box of the cells in the original diagram is used if this is enabled.

Default

true

graph

graph: Graph

Reference to the graph that should be previewed.

marginBottom

marginBottom: number = 0

The margin at the bottom of the page (number).

Default

0

marginTop

marginTop: number = 0

The margin at the top of the page (number).

Default

0

pageCount

pageCount: number = 0

Holds the actual number of pages in the preview.

pageFormat

pageFormat: Rectangle

Holds the Rectangle that defines the page format.

pageSelector

pageSelector: boolean

Boolean that specifies if the page selector should be displayed.

Default

true

printBackgroundImage

printBackgroundImage: boolean = false

Specifies if the background image should be printed.

Default

false

printControls

printControls: boolean = false

Specifies if controls (such as folding icons) should be printed. Default is false.

printOverlays

printOverlays: boolean = false

Specifies if overlays should be printed.

Default

false

scale

scale: number

Holds the scale of the print preview.

targetWindow

targetWindow: null | Window = null

Assign any window here to redirect the rendering in open.

title

title: string

Holds the title of the preview window.

wnd

wnd: null | Window = null

Reference to the preview window.

x0

x0: number = 0

Holds the horizontal offset of the output.

y0

y0: number = 0

Holds the vertical offset of the output.

Methods

addGraphFragment

  • addGraphFragment(dx, dy, scale, pageNumber, div, clip): void

  • Adds a graph fragment to the given div.

    Parameters

    • dx: number

      Horizontal translation for the diagram.

    • dy: number

      Vertical translation for the diagram.

    • scale: number

      Scale for the diagram.

    • pageNumber: number

      Number of the page to be rendered.

    • div: HTMLDivElement

      Div that contains the output.

    • clip: Rectangle

      Contains the clipping rectangle as an Rectangle.

    Returns void

addPageBreak

appendGraph

  • appendGraph(graph, scale, x0, y0, forcePageBreaks, keepOpen): void

  • Adds the given graph to the existing print preview.

    Parameters

    • graph: Graph
    • scale: number
    • x0: number
    • y0: number
    • forcePageBreaks: boolean
    • keepOpen: boolean

    Returns void

close

closeDocument

createPageSelector

  • createPageSelector(vpages, hpages): HTMLTableElement

  • Creates the page selector table.

    Parameters

    • vpages: number
    • hpages: number

    Returns HTMLTableElement

getAppendices

  • getAppendices(_width, _height): null | HTMLElement[]

  • Returns the pages to be added after the print output. This returns null.

    Parameters

    • _width: number
    • _height: number

    Returns null | HTMLElement[]

getCoverPages

  • getCoverPages(_width, _height): null | HTMLElement[]

  • Returns the pages to be added before the print output. This returns null.

    Parameters

    • _width: number
    • _height: number

    Returns null | HTMLElement[]

getDoctype

  • getDoctype(): string

  • Returns the string that should go before the HTML tag in the print preview page. This implementation returns an X-UA meta tag for IE5 in quirks mode, IE8 in IE8 standards mode and edge in IE9 standards mode.

    Returns string

getLinkForCellState

getRoot

getWindow

insertBackgroundImage

  • insertBackgroundImage(div, dx, dy): void

  • Inserts the background image into the given div.

    Parameters

    • div: HTMLDivElement
    • dx: number
    • dy: number

    Returns void

open

  • open(css?, targetWindow?, forcePageBreaks?, keepOpen?): null | Window

  • Shows the print preview window. The window is created here if it does not exist.

    Parameters

    • css: null | string = null

      Optional CSS string to be used in the head section.

    • targetWindow: null | Window = null

      Optional window that should be used for rendering. If this is specified then no HEAD tag, CSS and BODY tag will be written.

    • forcePageBreaks: boolean = false
    • keepOpen: boolean = false

    Returns null | Window

print

  • print(css?): void

  • Opens the print preview and shows the print dialog.

    Parameters

    • Optionalcss: string

      Optional CSS string to be used in the head section.

    Returns void

renderPage

  • renderPage(w, h, dx, dy, content, pageNumber?): HTMLDivElement

  • Creates a DIV that prints a single page of the given graph using the given scale and returns the DIV that represents the page.

    Parameters

    • w: number

      Width of the page in pixels.

    • h: number

      Height of the page in pixels.

    • dx: number

      Optional horizontal page offset in pixels (used internally).

    • dy: number

      Optional vertical page offset in pixels (used internally).

    • content: ((div: HTMLDivElement) => void)

      Callback that adds the HTML content to the inner div of a page. Takes the inner div as the argument.

        • (div): void

        • Parameters

          • div: HTMLDivElement

          Returns void

    • OptionalpageNumber: number

      Integer representing the page number.

    Returns HTMLDivElement

useCssTransforms

  • useCssTransforms(): boolean

  • Returns true if CSS transforms should be used for scaling content. This returns true if foreignObject is supported and we're not in Safari as it has clipping bugs for transformed CSS content with foreignObjects.

    Returns boolean

writeHead

  • writeHead(doc, css): void

  • Writes the HEAD section into the given document, without the opening and closing HEAD tags.

    Parameters

    • doc: Document
    • css: null | string

    Returns void

writePostfix

  • writePostfix(doc): any

  • Called before closing the body of the page. This implementation is empty.

    Parameters

    • doc: Document

    Returns any

Settings

Member Visibility

On This Page

Additional pagesCSSPaddingHeadersPage Format
Constructors
Properties
Methods