Может ли mxGraph экспортировать графики в формате PDF?

Я объясню случай запроса, инициированного клиентом, когда диаграмма отображается в браузере при выполнении запроса. Это стандартный случай: mxGraph передает XML-представление графика с использованием пользовательских графических примитивов, которые принимаются на сервер и декодируются бэкендами Java или .NET.

Причина необходимости отображения графика заключается в том, что существуют определенные текстовые измерения, которые трудно воссоздать вне среды браузера.

На стороне клиента вам нужно создать требуемый немедленный XML, используя, скажем, diagrameditor.html пример в качестве руководства:

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 — это URL-адрес сервлета, генерирующего изображения, в случае серверной части Java.

На стороне сервера, в случае с Java, посмотрите файл java/examples/com/mxgraph/examples/web/ExportServlet.java. Это смотрит на переданный параметр «формат», и если «pdf», вызывается метод writePdf().

Этот метод создает PdfWriter и визуализирует графические примитивы в Java Swing Graphics2D, используя предпочитаемую Java часть mxGraph. .

В этом примере результат в формате PDF записывается непосредственно во внешний поток ответа сервлета в этой строке:

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

Вы можете сопоставить вывод с любым потоком.

Обратите внимание, что вам нужно настроить iText для сопоставления всех шрифтов, которые вам нужны в PDF. Это не всегда идеально для большого количества шрифтов. Стоит протестировать несколько вариантов экспорта, чтобы убедиться, что результат соответствует вашим требованиям. В настоящее время мы изучаем возможность использования PhantomJS для экспорта. Если экспорт Java недостаточно хорош, задайте еще один вопрос об использовании PhantomJS, и я подробно опишу этот процесс.

iText предоставляется в качестве примера библиотеки PDF для использования, это проще, поскольку он находится в библиотеке с открытым исходным кодом. Возможно, это не самая подходящая библиотека, нам было нелегко работать с ней для этого конкретного сценария. Вы также можете изучить другие библиотеки Java для создания PDF-файлов.

Также обратите внимание, что серверная часть .NET поддерживает только создание растровых изображений в dotnet/aspnet/Export.ashx, нет известной библиотеки PDF с открытым исходным кодом, которую можно было бы предоставить в качестве примера.

Полное векторное решение:

1. Установить mxClient.NO_FO = true;
2. Экспорт SVG в PDF с помощью svg2pdf.js
3. Запишите весь текст DIV в pdf с помощью 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');