Printing a Diagram is typically accomplished by making several images of the Diagram and either saving them,
inserting them into a PDF or other document, or printing them directly from the browser.
On this page we will create several images out of a large Diagram and prepare a separate window holding those images.
That window is what is actually printed.
Below is the Diagram we are going to prepare for printing, scaled down to fit on this page.
window.myDiagram = diagram;
myDiagram.autoScale = go.AutoScale.Uniform;// define the Node template
myDiagram.nodeTemplate =newgo.Node("Spot",{locationSpot: go.Spot.Center }).add(newgo.Shape("Rectangle",{fill:"lightgray",// the initial value, but data-binding may provide different valuestroke:"black",desiredSize:newgo.Size(30,30)}).bind("fill"),newgo.TextBlock().bind("text"));// define the Link template to be minimal
myDiagram.linkTemplate =newgo.Link({selectable:false}).add(newgo.Shape());
myDiagram.layout =newgo.LayeredDigraphLayout();const minNodes =125, maxNodes =125;
myDiagram.startTransaction("generateDigraph");// replace the diagram's model's nodeDataArrayconst nodeArray =[];// get the values from the fields and create a random number of nodes within the rangelet min =parseInt(minNodes,10);let max =parseInt(maxNodes,10);if(isNaN(min)) min =0;if(isNaN(max)|| max < min) max = min;const numNodes = Math.floor(Math.random()*(max - min +1))+ min;for(let i =0; i < numNodes; i++){
nodeArray.push({key: i,text: i.toString(),fill: go.Brush.randomColor()});}// randomize the node datafor(let i =0; i < nodeArray.length; i++){const swap = Math.floor(Math.random()* nodeArray.length);const temp = nodeArray[swap];
nodeArray[swap]= nodeArray[i];
nodeArray[i]= temp;}// set the nodeDataArray to this array of objects
myDiagram.model.nodeDataArray = nodeArray;// replace the diagram's model's linkDataArrayconst linkArray =[];const nit = myDiagram.nodes;const nodes =newgo.List();
nodes.addAll(nit);for(let i =0; i < nodes.count -1; i++){const from = nodes.elt(i);const numto = Math.floor(1+(Math.random()*3)/2);for(let j =0; j < numto; j++){let idx = Math.floor(i +5+ Math.random()*10);if(idx >= nodes.count) idx = i +(Math.random()*(nodes.count - i))|0;const to = nodes.elt(idx);
linkArray.push({from: from.data.key,to: to.data.key });}}
myDiagram.model.linkDataArray = linkArray;
myDiagram.commitTransaction("generateDigraph");// print the diagram by opening a new window holding SVG images of the diagram contents for each pagefunctionprintDiagram(width, height){if(!width) width =700;if(!height) height =960;const svgWindow = window.open();if(!svgWindow)return;// failure to open a new Window
svgWindow.document.title ="GoJS Flowchart";
svgWindow.document.body.style.margin ="0px";const printSize =newgo.Size(width, height);const bnds = myDiagram.documentBounds;let x = bnds.x;let y = bnds.y;while(y < bnds.bottom){while(x < bnds.right){const svg = myDiagram.makeSvg({scale:1.0,position:newgo.Point(x, y),size: printSize,background: myDiagram.div.style.background
});
svgWindow.document.body.appendChild(svg);
x += printSize.width;}
x = bnds.x;
y += printSize.height;}setTimeout(()=>{ svgWindow.print(); svgWindow.close();},1);}
window.printDiagram = printDiagram;
Our code for print preparation is in a printDiagram function that cuts the Diagram into several images
of a given width and height and renders each such page individually.
Those images are in a separate window just to make it easier to manage than combining them with the contents of this page.
// print the diagram by opening a new window holding SVG images of the diagram contents for each pagefunctionprintDiagram(width, height){if(!width) width =700;if(!height) height =960;const svgWindow = window.open();if(!svgWindow)return;// failure to open a new Window
svgWindow.document.title ="GoJS Printing";
svgWindow.document.body.style.margin ="0px";const printSize =newgo.Size(width, height);const bnds = myDiagram.documentBounds;let x = bnds.x;let y = bnds.y;while(y < bnds.bottom){while(x < bnds.right){const svg = myDiagram.makeSvg({scale:1.0,position:newgo.Point(x, y),size: printSize,background: myDiagram.themeManager.findValue('div','colors'),});
svgWindow.document.body.appendChild(svg);
x += printSize.width;}
x = bnds.x;
y += printSize.height;}setTimeout(()=>{ svgWindow.print(); svgWindow.close();},1);}