流程圖控件GoJS教程：如何創建打印圖表

---

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新版

打印圖表通常是通過制作圖表的幾張圖像并將其保存，將其插入PDF或其他文檔中或直接從瀏覽器中進行打印來完成的。在此頁面上，我們將從大圖中創建幾個圖像，并準備一些CSS，以便在打印此頁面時僅打印那些圖像。

該頁面使用Diagram.makeImage，該圖具有自己的簡介頁面：使用GoJS制作圖像。

根據您的情況，您可能希望使用SVG進行打印，并且還有一個使用GoJS制作SVG的頁面，該頁面與制作圖像幾乎相同。在此頁面的示例中，您可以用Diagram.makeSvg代替相同的結果。

下面是我們準備打印的圖表。

我們用于打印準備的代碼包含一個generateImages功能，該功能可將圖表切成給定寬度和高度的多個圖像。在此頁面上，默認情況下會使用（700，960）進行調用，但是可以使用下面的HTML輸入動態修改寬度和高度。

    // if width or height are below 50, they are set to 50
    function generateImages(width, height) {
      // sanitize input
      width = parseInt(width);
      height = parseInt(height);
      if (isNaN(width)) width = 100;
      if (isNaN(height)) height = 100;
      // Give a minimum size of 50x50
      width = Math.max(width, 50);
      height = Math.max(height, 50);

      var imgDiv = document.getElementById('myImages');
      imgDiv.innerHTML = ''; // clear out the old images, if any
      var db = myDiagram.documentBounds;
      var boundswidth = db.width;
      var boundsheight = db.height;
      var imgWidth = width;
      var imgHeight = height;
      var p = db.position;
      for (var i = 0; i < boundsheight; i += imgHeight) {
        for (var j = 0; j < boundswidth; j += imgWidth) {
          var img = myDiagram.makeImage({
            scale: 1,
            position: new go.Point(p.x + j, p.y + i),
            size: new go.Size(imgWidth, imgHeight)
          });
          // Append the new HTMLImageElement to the #myImages div
          img.className = 'images';
          imgDiv.appendChild(img);
          imgDiv.appendChild(document.createElement('br'));
        }
      }
    }

    var button = document.getElementById('makeImages');
    button.addEventListener('click', function() {
      var width = parseInt(document.getElementById('widthInput').value);
      var height = parseInt(document.getElementById('heightInput').value);
      generateImages(width, height);
    }, false);

    // Call it with some default values
    generateImages(700, 960);

我們希望在打印此HTML頁面時不顯示任何圖像，因此，我們必須使用CSS規則隱藏所有頁面元素，但圖像本身以及導致正文的圖像的DOM父對象（＃content，＃myImages）除外。

使用下面的CSS，打印此頁面將只產生已添加到此頁面末尾的生成圖像，不會產生任何收益。通常，除了打印時，用于打印的一個或多個圖像可以完全向用戶隱藏，或者在新窗口中添加到單獨的頁面中。

/* @media print specifies CSS rules that only apply when printing */
@media print {
  /* CSS reset to clear styles for printing */
  html, body, div {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  /* Hide everything on the page */
  body * {
    display: none;
  }

  #content, #myImages, #myImages * {
    /* Only display the images we want printed */
    /* all of the image's parent divs
       leading up to the body must be un-hidden (displayed) too
    */
    display: block;
    /* CSS reset to clear the specific visible divs for printing */
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  /* We have line breaks in the DIV
     to separate the images in the browser,
     but do not want those line breaks when printing
  */
  #myImages br {
    display: none;
  }

  img {
    /* Only some browsers respect this rule: */
    page-break-inside: avoid;
    /* Almost all browsers respect this rule: */
    page-break-after:always;
  }
}

/* The @page rules specify additional printing directives that browsers may respect
   Here we suggest printing in landscape (instead of portrait) with a small margin.
   Browsers, however, are free to ignore or override these suggestions.
   See also:
    //developer.mozilla.org/en-US/docs/CSS/@page
    //dev.w3.org/csswg/css3-page/#at-page-rule
*/
@page {
  /* Some browsers respect rules such as size: landscape */
  margin: 1cm;
}

此頁面末尾的圖像是通過調用生成的generateImages(700, 960)。使用下面的輸入，圖像可以替換為其他尺寸的圖像。如果要填充紙張，不同的紙張，頁面方向和邊距將需要不同尺寸的圖像，并且（700，960）是建議的尺寸，縱向為8.5英寸乘11紙張，且邊距最小。

下載SVG文件

如果您希望用戶下載SVG文件，則無需涉及Web服務器。請參閱樣本。請注意，該示例僅下載一個SVG文件，但是該文件可以覆蓋整個文檔。

---

想要購買GoJS正版授權，或了解更多產品信息請點擊