mxGraph可以将图形导出为PDF吗？ [英] Can mxGraph export graphs as PDFs?

问题描述

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

I am working on a project that uses mxGraph where I am required to export a high resolution output in PDF for a service process diagram. I've tried recreating the graph using JGraphX, the Java Swing client and exporting that to a PDF, but the result is not close to what the browser displays.

没有在客户端上使用JavaScript导出PDF，mxGraph是否明确支持从JavaScript生成PDF？

There's no PDF export in JavaScript on the client, does mxGraph have any explicit support for PDF generation from JavaScript?

推荐答案

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

I'll explain the case of a client initiated request, where the diagram is displayed on the browser when the request is made. This is the standard case, mxGraph transmits an XML representation of the graph using custom graphics primitives and these are received on the server and decoded either by the Java or .NET back-ends.

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

The reason for the need for the graph being displayed is there are certain text measurements that are hard to recreate outside of a browser environment.

在客户端你需要使用 diagrameditor.html <创建所需的即时XML / a>示例作为指南：

On the client side you need to create the required immediate XML using, say, the diagrameditor.html example as a guide:

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 是网址图像生成servlet，对于Java后端。

Where editor.urlImage is the URL of the image generating servlet, in the case for a Java back-end.

在服务器端，对于Java，请查看java / examples / com /mxgraph/examples/web/ExportServlet.java。这会查看传递的format参数，如果是'pdf'，则调用 writePdf（）方法。

On the server-side, in the case of Java, look at the java/examples/com/mxgraph/examples/web/ExportServlet.java. That looks at the "format" parameter passed up, and if 'pdf', the writePdf() method is invoked.

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

That method creates an PdfWriter and renders the graphics primitives to a Java Swing Graphics2D using the Java favoured part of mxGraph.

此示例将PDF结果直接写入此行中servlet repsonse的outstream：

This example writes the PDF result directly to the outstream of the servlet repsonse in this line:

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

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

You could map the output to any stream.

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

Note that you need to setup iText to map every font you need in the PDF. This isn't always ideal for a large number of fonts. It's worth testing a few cases of the export to see if the output is good enough for your requirements. We're currently researching the use of PhantomJS for the export. If the Java export isn't good enough, please post another question regarding using PhantomJS and I'll detail the process for that.

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

iText is provided as an example PDF library to use, it's easier since it's under an open source library. It's possibly not the best suited library, we didn't find it easy to work with for this specific scenario. You might also want to investigate other Java PDF generation libraries.

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

Also note that the .NET back-end only supports raster image generation in dotnet/aspnet/Export.ashx, there's no known open source PDF library to supply as an example there.

这篇关于mxGraph可以将图形导出为PDF吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！