javascript – mxGraph可以将图形导出为PDF吗?

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

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

解决方法

我将解释客户端发起的请求的情况,其中图表在请求发生时显示在浏览器上.这是标准情况,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是图像生成servlet的URL,对于Java后端.

在服务器端,对于Java,请查看java / examples / com / mxgraph / examples / web / ExportServlet.java.这会查看传递的“format”参数,如果是’pdf’,则调用writePdf()方法.

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

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

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

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

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

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

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...