mxPrintPreview

Implements printing of a diagram across multiple pages.  The following opens a print preview for an existing graph:

var preview = new mxPrintPreview(graph);
preview.open();

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

var pageCount = mxUtils.prompt('Enter page count', '1');

if (pageCount != null)
{
  var scale = mxUtils.getScaleForPageCount(pageCount, graph);
  var preview = new mxPrintPreview(graph, scale);
  preview.open();
}

Additional pages

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

var preview = new mxPrintPreview(graph, 1);

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

preview.getAppendices = function(w, h)
{
  return [this.renderPage(w, h, 0, 0, mxUtils.bind(this, function(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:

var writeHead = preview.writeHead;
preview.writeHead = function(doc, css)
{
  writeHead.apply(this, arguments);
  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)
{
  writeHead.apply(this, arguments);

  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 mxPrintPreview constructor you can override renderPage as follows to add a header to any page:

var oldRenderPage = mxPrintPreview.prototype.renderPage;
mxPrintPreview.prototype.renderPage = function(w, h, x, y, content, pageNumber)
{
  var div = oldRenderPage.apply(this, arguments);

  var header = document.createElement('div');
  header.style.position = 'absolute';
  header.style.top = '0px';
  header.style.width = '100%';
  header.style.textAlign = 'right';
  mxUtils.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 <mxConstants.PAGE_FORMAT_A4_LANDSCAPE> as the pageFormat in mxUtils.getScaleForPageCount and mxPrintPreview.  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;
}

Note that the print preview behaves differently in IE when used from the filesystem or via HTTP so printing should always be tested via HTTP.

If you are using a DOCTYPE in the source page you can override <getDoctype> and provide the same DOCTYPE for the print preview if required.  Here is an example for IE8 standards mode.

var preview = new mxPrintPreview(graph);
preview.getDoctype = function()
{
  return '<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=8" ><![endif]-->';
};
preview.open();
Summary
mxPrintPreviewImplements printing of a diagram across multiple pages.
Functions
mxPrintPreviewConstructs a new print preview for the given parameters.
Variables
graphReference to the mxGraph that should be previewed.
pageFormatHolds the mxRectangle that defines the page format.
scaleHolds the scale of the print preview.
borderThe border inset around each side of every page in the preview.
marginTopThe margin at the top of the page (number).
marginBottomThe margin at the bottom of the page (number).
x0Holds the horizontal offset of the output.
y0Holds the vertical offset of the output.
autoOriginSpecifies if the origin should be automatically computed based on the top, left corner of the actual diagram contents.
printOverlaysSpecifies if overlays should be printed.
printControlsSpecifies if controls (such as folding icons) should be printed.
printBackgroundImageSpecifies if the background image should be printed.
backgroundColorHolds the color value for the page background color.
borderColorHolds the color value for the page border.
titleHolds the title of the preview window.
pageSelectorBoolean that specifies if the page selector should be displayed.
wndReference to the preview window.
targetWindowAssign any window here to redirect the rendering in open.
pageCountHolds the actual number of pages in the preview.
clippingSpecifies is clipping should be used to avoid creating too many cell states in large diagrams.
Functions
getWindowReturns wnd.
getDocTypeReturns the string that should go before the HTML tag in the print preview page.
appendGraphAdds the given graph to the existing print preview.
openShows the print preview window.
addPageBreakAdds a page break to the given document.
closeDocumentWrites the closing tags for body and page after calling writePostfix.
writeHeadWrites the HEAD section into the given document, without the opening and closing HEAD tags.
writePostfixCalled before closing the body of the page.
createPageSelectorCreates the page selector table.
renderPageCreates a DIV that prints a single page of the given graph using the given scale and returns the DIV that represents the page.
getRootReturns the root cell for painting the graph.
useCssTransformsReturns true if CSS transforms should be used for scaling content.
addGraphFragmentAdds a graph fragment to the given div.
getLinkForCellStateReturns the link for the given cell state.
insertBackgroundImageInserts the background image into the given div.
getCoverPagesReturns the pages to be added before the print output.
getAppendicesReturns the pages to be added after the print output.
printOpens the print preview and shows the print dialog.
closeCloses the print preview window.

Functions

mxPrintPreview

function mxPrintPreview(graph,
scale,
pageFormat,
border,
x0,
y0,
borderColor,
title,
pageSelector)

Constructs a new print preview for the given parameters.

Parameters

graphmxGraph to be previewed.
scaleOptional scale of the output.  Default is 1 / mxGraph.pageScale.
pageFormatmxRectangle that specifies the page format (in pixels).
borderBorder in pixels along each side of every page.  Note that the actual print function in the browser will add another border for printing.  This should match the page format of the printer.  Default uses the mxGraph.pageFormat of the given graph.
x0Optional left offset of the output.  Default is 0.
y0Optional top offset of the output.  Default is 0.
borderColorOptional color of the page border.  Default is no border.  Note that a border is sometimes useful to highlight the printed page border in the print preview of the browser.
titleOptional string that is used for the window title.  Default is ‘Printer-friendly version’.
pageSelectorOptional boolean that specifies if the page selector should appear in the window with the print preview.  Default is true.

Variables

graph

mxPrintPreview.prototype.graph

Reference to the mxGraph that should be previewed.

pageFormat

mxPrintPreview.prototype.pageFormat

Holds the mxRectangle that defines the page format.

scale

mxPrintPreview.prototype.scale

Holds the scale of the print preview.

border

mxPrintPreview.prototype.border

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

marginTop

mxPrintPreview.prototype.marginTop

The margin at the top of the page (number).  Default is 0.

marginBottom

mxPrintPreview.prototype.marginBottom

The margin at the bottom of the page (number).  Default is 0.

x0

mxPrintPreview.prototype.x0

Holds the horizontal offset of the output.

y0

mxPrintPreview.prototype.y0

Holds the vertical offset of the output.

autoOrigin

mxPrintPreview.prototype.autoOrigin

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 is true.

printOverlays

mxPrintPreview.prototype.printOverlays

Specifies if overlays should be printed.  Default is false.

printControls

mxPrintPreview.prototype.printControls

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

printBackgroundImage

mxPrintPreview.prototype.printBackgroundImage

Specifies if the background image should be printed.  Default is false.

backgroundColor

mxPrintPreview.prototype.backgroundColor

Holds the color value for the page background color.  Default is #ffffff.

borderColor

mxPrintPreview.prototype.borderColor

Holds the color value for the page border.

title

mxPrintPreview.prototype.title

Holds the title of the preview window.

pageSelector

mxPrintPreview.prototype.pageSelector

Boolean that specifies if the page selector should be displayed.  Default is true.

wnd

mxPrintPreview.prototype.wnd

Reference to the preview window.

targetWindow

mxPrintPreview.prototype.targetWindow

Assign any window here to redirect the rendering in open.

pageCount

mxPrintPreview.prototype.pageCount

Holds the actual number of pages in the preview.

clipping

mxPrintPreview.prototype.clipping

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 is true.

Functions

getWindow

mxPrintPreview.prototype.getWindow = function()

Returns wnd.

getDocType

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.

appendGraph

mxPrintPreview.prototype.appendGraph = function(graph,
scale,
x0,
y0,
forcePageBreaks,
keepOpen)

Adds the given graph to the existing print preview.

Parameters

cssOptional CSS string to be used in the head section.
targetWindowOptional window that should be used for rendering.  If this is specified then no HEAD tag, CSS and BODY tag will be written.

open

mxPrintPreview.prototype.open = function(css,
targetWindow,
forcePageBreaks,
keepOpen)

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

Parameters

cssOptional CSS string to be used in the head section.
targetWindowOptional window that should be used for rendering.  If this is specified then no HEAD tag, CSS and BODY tag will be written.

addPageBreak

mxPrintPreview.prototype.addPageBreak = function(doc)

Adds a page break to the given document.

closeDocument

mxPrintPreview.prototype.closeDocument = function()

Writes the closing tags for body and page after calling writePostfix.

writeHead

mxPrintPreview.prototype.writeHead = function(doc,
css)

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

writePostfix

mxPrintPreview.prototype.writePostfix = function(doc)

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

createPageSelector

mxPrintPreview.prototype.createPageSelector = function(vpages,
hpages)

Creates the page selector table.

renderPage

mxPrintPreview.prototype.renderPage = function(w,
h,
dx,
dy,
content,
pageNumber)

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

wWidth of the page in pixels.
hHeight of the page in pixels.
dxOptional horizontal page offset in pixels (used internally).
dyOptional vertical page offset in pixels (used internally).
contentCallback that adds the HTML content to the inner div of a page.  Takes the inner div as the argument.
pageNumberInteger representing the page number.

getRoot

mxPrintPreview.prototype.getRoot = function()

Returns the root cell for painting the graph.

useCssTransforms

mxPrintPreview.prototype.useCssTransforms = function()

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.

addGraphFragment

mxPrintPreview.prototype.addGraphFragment = function(dx,
dy,
scale,
pageNumber,
div,
clip)

Adds a graph fragment to the given div.

Parameters

dxHorizontal translation for the diagram.
dyVertical translation for the diagram.
scaleScale for the diagram.
pageNumberNumber of the page to be rendered.
divDiv that contains the output.
clipContains the clipping rectangle as an mxRectangle.

getLinkForCellState

mxPrintPreview.prototype.getLinkForCellState = function(state)

Returns the link for the given cell state.  This returns null.

insertBackgroundImage

mxPrintPreview.prototype.insertBackgroundImage = function(div,
dx,
dy)

Inserts the background image into the given div.

getCoverPages

mxPrintPreview.prototype.getCoverPages = function()

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

getAppendices

mxPrintPreview.prototype.getAppendices = function()

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

print

mxPrintPreview.prototype.print = function(css)

Opens the print preview and shows the print dialog.

Parameters

cssOptional CSS string to be used in the head section.

close

mxPrintPreview.prototype.close = function()

Closes the print preview window.

function mxPrintPreview(graph,
scale,
pageFormat,
border,
x0,
y0,
borderColor,
title,
pageSelector)
Constructs a new print preview for the given parameters.
mxPrintPreview.prototype.graph
Reference to the mxGraph that should be previewed.
Extends mxEventSource to implement a graph component for the browser.
mxPrintPreview.prototype.pageFormat
Holds the mxRectangle that defines the page format.
Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
mxPrintPreview.prototype.scale
Holds the scale of the print preview.
mxPrintPreview.prototype.border
The border inset around each side of every page in the preview.
mxPrintPreview.prototype.marginTop
The margin at the top of the page (number).
mxPrintPreview.prototype.marginBottom
The margin at the bottom of the page (number).
mxPrintPreview.prototype.x0
Holds the horizontal offset of the output.
mxPrintPreview.prototype.y0
Holds the vertical offset of the output.
mxPrintPreview.prototype.autoOrigin
Specifies if the origin should be automatically computed based on the top, left corner of the actual diagram contents.
mxPrintPreview.prototype.printOverlays
Specifies if overlays should be printed.
mxPrintPreview.prototype.printControls
Specifies if controls (such as folding icons) should be printed.
mxPrintPreview.prototype.printBackgroundImage
Specifies if the background image should be printed.
mxPrintPreview.prototype.backgroundColor
Holds the color value for the page background color.
mxPrintPreview.prototype.borderColor
Holds the color value for the page border.
mxPrintPreview.prototype.title
Holds the title of the preview window.
mxPrintPreview.prototype.pageSelector
Boolean that specifies if the page selector should be displayed.
mxPrintPreview.prototype.wnd
Reference to the preview window.
mxPrintPreview.prototype.targetWindow
Assign any window here to redirect the rendering in open.
mxPrintPreview.prototype.open = function(css,
targetWindow,
forcePageBreaks,
keepOpen)
Shows the print preview window.
mxPrintPreview.prototype.pageCount
Holds the actual number of pages in the preview.
mxPrintPreview.prototype.clipping
Specifies is clipping should be used to avoid creating too many cell states in large diagrams.
mxPrintPreview.prototype.getWindow = function()
Returns wnd.
mxPrintPreview.prototype.appendGraph = function(graph,
scale,
x0,
y0,
forcePageBreaks,
keepOpen)
Adds the given graph to the existing print preview.
mxPrintPreview.prototype.addPageBreak = function(doc)
Adds a page break to the given document.
mxPrintPreview.prototype.closeDocument = function()
Writes the closing tags for body and page after calling writePostfix.
mxPrintPreview.prototype.writePostfix = function(doc)
Called before closing the body of the page.
mxPrintPreview.prototype.writeHead = function(doc,
css)
Writes the HEAD section into the given document, without the opening and closing HEAD tags.
mxPrintPreview.prototype.createPageSelector = function(vpages,
hpages)
Creates the page selector table.
mxPrintPreview.prototype.renderPage = function(w,
h,
dx,
dy,
content,
pageNumber)
Creates a DIV that prints a single page of the given graph using the given scale and returns the DIV that represents the page.
mxPrintPreview.prototype.getRoot = function()
Returns the root cell for painting the graph.
mxPrintPreview.prototype.useCssTransforms = function()
Returns true if CSS transforms should be used for scaling content.
mxPrintPreview.prototype.addGraphFragment = function(dx,
dy,
scale,
pageNumber,
div,
clip)
Adds a graph fragment to the given div.
mxPrintPreview.prototype.getLinkForCellState = function(state)
Returns the link for the given cell state.
mxPrintPreview.prototype.insertBackgroundImage = function(div,
dx,
dy)
Inserts the background image into the given div.
mxPrintPreview.prototype.getCoverPages = function()
Returns the pages to be added before the print output.
mxPrintPreview.prototype.getAppendices = function()
Returns the pages to be added after the print output.
mxPrintPreview.prototype.print = function(css)
Opens the print preview and shows the print dialog.
mxPrintPreview.prototype.close = function()
Closes the print preview window.
getScaleForPageCount: function(pageCount,
graph,
pageFormat,
border)
Returns the scale to be used for printing the graph with the given bounds across the specifies number of pages with the given format.
mxGraph.prototype.pageScale
Specifies the scale of the background page.
mxGraph.prototype.pageFormat
Specifies the page format for the background page.
Close