javascript - mxGraph 可以将图形导出为 PDF 吗？

Question

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

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

Answer 1

我将解释客户端发起请求的情况，当发出请求时，图表会显示在浏览器上。这是标准情况，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');
    }
};

在 Java 后端的情况下，editor.urlImage 是图像生成 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 库作为示例。