GoJs中导出图片或者SVG实现示例详解-前端开发

当我们需要在GoJs中快速导出图片或SVG文件时，可以使用GoJs的API来实现这一目标。下面我将详细讲解“GoJs中导出图片或者SVG实现示例详解”的完整攻略。

当我们需要在GoJs中快速导出图片或SVG文件时，可以使用GoJs的API来实现这一目标。下面我将详细讲解“GoJs中导出图片或者SVG实现示例详解”的完整攻略。

第一步：加载相关库文件

要使用GoJs的导出功能，首先需要在您的网站中引入GoJs和后端服务器使用的库文件。

<script src="https://unpkg.com/gojs/release/go.js"></script>
<script src="https://unpkg.com/gojs/extensions/PDFMake.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

第二步：定义页面的GoJs图表

在页面上定义一个Gojs图表，并向其添加一些节点和连线，这里我们用一个简单的示例来说明：

<div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 400px"></div>

<script>
  // 定义一个Go.js图表
  var $ = go.GraphObject.make;
  var myDiagram =
    $(go.Diagram, "myDiagramDiv",
      { // 定义一些属性值
        initialAutoScale: go.Diagram.UniformToFill,
        "undoManager.isEnabled": true // 允许撤消和重做
      });

  // 添加一些节点和连线
  myDiagram.add(
    $(go.Part, "Table",
      $(go.TextBlock, "Hello"),
      $(go.Shape, "Rectangle", { fill: "orange" })
    ),
    $(go.Part, "Table",
      $(go.TextBlock, "World"),
      $(go.Shape, "Rectangle", { fill: "lightblue" })
    ),
    $(go.Link,
      $(go.Shape, { strokeWidth: 2 }),
      $(go.Shape, { toArrow: "Standard" })
    )
  );
</script>

第三步：定义导出选项

为了导出Go.js图表，我们需要定义导出选项，这些选项将影响导出的文件格式和内容。下面是一个导出选项的示例：

function makeSvg() { // 创建SVG文件
  var svg = myDiagram.makeSvg({
    scale: 1.0 // 默认比例为1.0
  });
  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  return new XMLSerializer().serializeToString(svg);
}

var Diagram = go.Diagram;

var pdfOptions = {
  showTemporaryText: false, // 不显示暂时的字体
  compress: false, // 不使用压缩模式
  documentTitle: "GoJS Diagram", // 设定文件标题
  fileName: "myDiagram.pdf", // 设定文件名
  scale: Diagram.UniformToFill
};
var svgOptions = {
  scale: 1.0, // 设置比例
  background: "white", // 背景色为白色
  documentTitle: "GoJS Diagram", // 设定文件标题
  fileName: "myDiagram.svg" // 设定文件名
};

第四步：将图表导出为图片

有两种方法可以将Gojs图表导出为图片，一种是将图表导出为PNG格式，另一种是导出为JPG格式。我们将使用FileSaver.js库将图表保存为本地文件。

将图表导出为PNG格式

function makePng() { // 创建PNG文件
    var promise = new Promise(function(resolve, reject) {
      myDiagram.makeImage({
        scale: 1.0 // 默认比例为 1.0
      }, function(blob) {
        resolve(blob);
      });
  });
  return promise;
}

// 定义一个按钮，点击即导出PNG文件
document.querySelector("#exportPng").addEventListener("click", function() {
  makePng().then(function(blob) {
    saveAs(blob, "myDiagram.png");
  });
});

将图表导出为JPG格式

function makeJpg() { // 创建JPG文件
  var promise = new Promise(function(resolve, reject) {
    myDiagram.makeImage({
      scale: 1.0,
      type: "image/jpeg"
    }, function(blob) {
      resolve(blob);
    });
  });
  return promise;
}

// 定义一个按钮，点击即导出JPG文件
document.querySelector("#exportJpg").addEventListener("click", function() {
  makeJpg().then(function(blob) {
    saveAs(blob, "myDiagram.jpg");
  });
});

第五步：将图表导出为SVG文件

// 定义一个按钮，点击即导出SVG文件
document.querySelector("#exportSvg").addEventListener("click", function() {
  var svgData = makeSvg();
  var blob = new Blob([svgData], { type: "image/svg+xml" });
  saveAs(blob, "myDiagram.svg");
});

第六步：将图表导出为PDF文件

document.querySelector("#exportPdf").addEventListener("click", function() {
  var pdfOptions = {
    showTemporaryText: true, // 以暂时的、大尺寸的字体展示图表
    compress: true, // 开启压缩
    documentTitle: "GoJS Diagram", // 设定文件标题
    fileName: "myDiagram.pdf", // 设定文件名
    scale: Diagram.UniformToFill // 设置比例为Unifrom To Fill
  };
  var pdfmake = window['pdfMake'];
  pdfmake.createPdf(pdfmakeDiagram(myDiagram), pdfOptions).download();
});

function pdfmakeGODiagram(diagram, options) {
  var pdfOptions = options || {};
  var svgData = makeSvg();
  var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgData);
  var imgOptions = {
    src: url,
    fit: [100 * 1.3333, 100], // 固定图表宽度
    align: 'center'
  };
  var imgObject = pdfmake.createImg(imgOptions);
  imgObject["width"] = diagram.documentBounds.width;
  imgObject["height"] = diagram.documentBounds.height;
  imgObject["alignment"] = 'center';
  return {
    pageSize: 'A4',
    pageMargins: [40, 40],
    content: [
      {
        canvas: [
          {
            type: 'rect',
            x: imgOptions.width + 15,
            y: 5,
            w: 200,
            h: 17,
            r: 2,
            color: pdfOptions.showTemporaryText ? '#EAEAEA' : '#FFFFFF'
          },
          {
            text: pdfOptions.showTemporaryText ? "Temporary Text" : pdfOptions.documentTitle,
            fontSize: 11,
            bold: true,
            color: pdfOptions.showTemporaryText ? '#AAAAAA' : '#333333',
            absolutePosition: { x: imgOptions.width + 25, y: 10 }
          }
        ]
      },
      // 渲染创建的GoJo图表
      { image: imgObject },
    ]
  };
}

好了，以上就是GoJs中导出图片或者SVG的实现示例详解。希望对您有所帮助！