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');
    }
};

其中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库作为示例提供。

Answer 2

完整矢量解决方案：

设置mxClient.NO_FO = true;
通过svg2pdf.js
用jsPDF

示例：

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');

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

2 个答案: