mxGraph - Export to Image

问题

I am trying to export mxGraph to PNG image. In the graph HTMLLabels is set to true and custom html formatted (Using Div tags) content used for vertex labels. In the exported image, raw html tags are getting displayed instead of formatted one.

This is for javascript as client and C# as backend.

Code Sample:Actual Image Expected Image

// Setting HTML Label to true

mxGraph.prototype.isHtmlLabel = function(cell)
{
    return true;
}

graph.convertValueToString = function(cell)
{
    if (mxUtils.isNode(cell.value))
    {
        var labelVal = cell.getAttribute('label', '');

        if (labelVal != null)
        {
            return labelVal;
        }

        return '';
    }

    return '';
};

var tmpElem = doc.createElement("testnode");
// Setting label text as HTML formatted content
tmpElem.setAttribute('label', '<div class="roottitle">Label Text</div>');
graphItm = graph.insertVertex(parent, null, tmpElem, 0, 0, 100, 30);

var ExportGraphToImage = function()
{
    exportFile("png");
}

function exportFile(format) {
        var bg = '#ffffff';
        var scale = 1;
        var b = 1;
        var imgExport = new mxImageExport();
        var bounds = graph.getGraphBounds();
        var vs = graph.view.scale;
        // 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((b / scale - bounds.x) / vs), Math.floor((b / scale - bounds.y) / vs));
        xmlCanvas.scale(scale / vs);
        imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);
        // Puts request data together
        var w = Math.ceil(bounds.width * scale / vs + 2 * b);
        var h = Math.ceil(bounds.height * scale / vs + 2 * b);
        var xml = mxUtils.getXml(root);
        if (bg != null) {
            bg = '&bg=' + bg;
        }
        new mxXmlRequest('../mxGraph/Export.ashx', 'filename=export.' + format + '&format=' + format +
            bg + '&w=' + w + '&h=' + h + '&xml=' + encodeURIComponent(xml)).
            simulate(document, '_blank');
    }

In graph, it is displayed as "Label Text" in the vertex. In exported image, it is displayed as "<div class="roottitle">Label Text</div>"

来源：https://stackoverflow.com/questions/55377771/mxgraph-export-to-image

标签

mxgraph