7

我正在开发一个使用 mxGraph 的项目，我需要以 PDF 格式导出高分辨率输出以获取服务流程图。我尝试使用 Java Swing 客户端 JGraphX 重新创建图形并将其导出为 PDF，但结果与浏览器显示的结果并不接近。

客户端的 JavaScript 中没有 PDF 导出，mxGraph 是否明确支持从 JavaScript 生成 PDF？

4

2 回答 2

4

我将解释客户端发起请求的情况，当发出请求时，图表会显示在浏览器上。这是标准情况，mxGraph 使用自定义图形基元传输图形的 XML 表示，这些在服务器上接收并由 Java 或 .NET 后端解码。

需要显示图表的原因是某些文本度量很难在浏览器环境之外重新创建。

在客户端，您需要使用例如diagrameditor.html示例作为指南来创建所需的即时 XML：

var exportImage = function(editor)
{
    var graph = editor.graph;
    var scale = graph.view.scale;
    var bounds = graph.getGraphBounds();

        // New image export
    var xmlDoc = mxUtils.createXmlDocument();
    var root = xmlDoc.createElement('output');
    xmlDoc.appendChild(root);

    // Renders graph. Offset will be multiplied with state's scale when painting state.
    var xmlCanvas = new mxXmlCanvas2D(root);
    xmlCanvas.translate(Math.floor(1 / scale - bounds.x), Math.floor(1 / scale - bounds.y));
    xmlCanvas.scale(scale);

    var imgExport = new mxImageExport();
    imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);

    // Puts request data together
    var w = Math.ceil(bounds.width * scale + 2);
    var h = Math.ceil(bounds.height * scale + 2);
    var xml = mxUtils.getXml(root);

    // Requests image if request is valid
    if (w > 0 && h > 0)
    {
        var name = 'export.png';
        var format = 'png';
        var bg = '&bg=#FFFFFF';

        new mxXmlRequest(editor.urlImage, 'filename=' + name + '&format=' + format +
                bg + '&w=' + w + '&h=' + h + '&xml=' + encodeURIComponent(xml)).
                simulate(document, '_blank');
    }
};

editor.urlImage在Java 后端的情况下，图像生成 servlet 的 URL 在哪里。

在服务器端，如果是 Java，请查看 java/examples/com/mxgraph/examples/web/ExportServlet.java。这会查看传递的“格式”参数，如果是“pdf”，writePdf()则调用该方法。

该方法创建一个PdfWriter并使用 mxGraph 的 Java 喜欢的部分将图形基元呈现给 Java Swing Graphics2D。

此示例将 PDF 结果直接写入此行中的 servlet 响应的外流：

PdfWriter writer = PdfWriter.getInstance(document, response.getOutputStream());

您可以将输出映射到任何流。

请注意，您需要设置 iText 以映射 PDF 中所需的每种字体。对于大量字体，这并不总是理想的。值得测试一些导出案例，看看输出是否足以满足您的要求。我们目前正在研究使用PhantomJS进行导出。如果 Java 导出不够好，请发布另一个有关使用 PhantomJS 的问题，我将详细说明该过程。

iText 作为示例 PDF 库提供使用，它更容易，因为它位于开源库下。它可能不是最适合的库，我们发现在这种特定情况下使用它并不容易。您可能还想研究其他 Java PDF 生成库。

另请注意，.NET 后端仅支持在 dotnet/aspnet/Export.ashx 中生成光栅图像，没有已知的开源 PDF 库可作为示例提供。

于 2013-11-10T22:43:28.387 回答
0

全矢量解决方案：

  1. 放mxClient.NO_FO = true;
  2. 通过svg2pdf.js将 SVG 导出为 PDF
  3. 通过jsPDF将所有 DIV 的文本写入 pdf

例子：

let pdf = new jsPDF('p', 'pt', 'a4', false, false);
mxClient.NO_FO = true;
let graph = Draw(drawdiv, false);
let svgEl = drawdiv.children[1];
//draw svg:
svg2pdf(svgEl, pdf, {
  xOffset: pdfPageDefaultOffsetX,
  yOffset: pdfOffsetY,
  scale: divToPdfRatio
});
//draw text:
for (let child of drawdiv.children) {
  if (child.tagName === 'DIV') {
    let splitText = pdf.splitTextToSize(child.innerText, Math.ceil((childSizes.width) * divToPdfRatio));
    pdf.text(pdfPageDefaultOffsetX + (child.offsetLeft * divToPdfRatio), textPositionTop, splitText, {
      align: child.style.textAlign,
      lineHeightFactor: 1,
    });
  }
}
pdf.save('Test.pdf');
于 2020-07-29T14:50:56.130 回答