mxGraph导出流程图

最新推荐文章于 2024-09-04 07:34:25 发布

L1208Sou

最新推荐文章于 2024-09-04 07:34:25 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/L1208Sou/article/details/116271122

版权

mxgraph 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

VUE

1 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何使用mxGraph库导出流程图为PNG、SVG和PDF格式。首先，前端通过XML数据获取流程图的布局和样式，然后将这些数据发送到后端。后端接收到数据后，利用mxUtils和SAXParser进行XML解析和图像渲染，最终生成指定格式的文件。整个过程涉及到图像处理、XML操作和文件保存等技术。

摘要由CSDN通过智能技术生成

导出mxGraph流程图

获取流程图XML数据(前端)

ExportPNG(){
  let  bg = '#ffffff';
  let  scale = 1;
  let  b = 1;
  let format = 'png';
  let  imgExport = new mxImageExport();
  let  bounds = this.graph.getGraphBounds();
  let  vs = this.graph.view.scale;
  //
  let  xmlDoc = mxUtils.createXmlDocument();
  let  root = xmlDoc.createElement('output');
  xmlDoc.appendChild(root);
  let  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(this.graph.getView().getState(this.graph.model.root), xmlCanvas);
  // 获取宽度和高度
  let  w = Math.ceil(bounds.width * scale / vs + 2 * b);
  let  h = Math.ceil(bounds.height * scale / vs + 2 * b);
  //获取生成png格式的xml
  let  xml = mxUtils.getXml(root);
  console.log(w)
  console.log(h)
  console.log(xml)
  if (bg != null)
  {
    bg = '&bg=' + bg;
  }
  // new mxXmlRequest('http://localhost:8080/Export', 'filename=export.' + format + '&format=' + format +
  //   bg + '&w=' + w + '&h=' + h + '&xml=' + encodeURIComponent(xml)).
  // simulate(document, '_blank');
},

后端代码

引入的jar包有：mxgraph-all.jar和mxPdf.jar

public static BufferedImage EMPTY_IMAGE;

/**
 * Initializes the empty image.
 */
static
{
    try
    {
        EMPTY_IMAGE = new BufferedImage(1, 1, BufferedImage.TYPE_INT_RGB);
    }
    catch (Exception e)
    {
        // ignore
    }
}
public static  SAXParserFactory parserFactory = SAXParserFactory.newInstance();
public static  Hashtable<String, Image> imageCache = new Hashtable<String, Image>();

public static void main( String[] args ) throws IOException, SAXException, ParserConfigurationException {
    //可以选择生成的格式
    String format = "png";
    if(("png").equals(format)){
        ExportPNG();
    }else if(("svg").equals(format)){
        ExportSVG();
    }else if(("pdf").equals(format)){
        ExportPDF();
    }
}

public static void ExportPNG() throws IOException, SAXException, ParserConfigurationException {
    String format = "png";
    SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
    //文件名
    String fname = df.format(new Date())+"DJ";
    //前端获取的宽度和高度
    int w = 553;
    int h= 491;
    Color bg= Color.white;
    //存放路径
    String path = "J:/webStrom/";
    //前端生成的xml数据
    String xml= "<output>xx</output>";
    //文件
    File on = new File(path+fname+".png");
    File dir = new File(path);
    if (!dir.exists()) {//若路径不存在则创建此路径
        dir.mkdir();
    }
    BufferedImage image = com.mxgraph.util.mxUtils.createBufferedImage(w, h, bg);
    if (image != null)
    {
        /**
         * TODO 浏览器下载
         *  if (fname != null)
         *  {
         *     response.setContentType("application/x-unknown");
         *     response.setHeader("Content-Disposition", "attachment; filename=\"" + fname + "\"; filename*=UTF-8''" + fname);
         *  }
         *  ImageIO.write(image, format, response.getOutputStream());
         */
        Graphics2D g2 = image.createGraphics();
        com.mxgraph.util.mxUtils.setAntiAlias(g2, true, true);
        //引入方法
        renderXml(xml, createCanvas(path, g2));
        ImageIO.write(image, format, on);
    }
}

public static mxGraphicsCanvas2D createCanvas(String url, Graphics2D g2)
{
    //缓存自定义图像的时间请求
    final Hashtable<String, Image> shortCache = new Hashtable<String, Image>();
    final String domain = url.substring(0, url.lastIndexOf("/"));
    mxGraphicsCanvas2D g2c = new mxGraphicsCanvas2D(g2)
    {
        public Image loadImage(String src)
        {
            // 默认使用本地图像缓存
            Hashtable<String, Image> cache = shortCache;

            // 为本地图像使用全局图像缓存
            if (src.startsWith(domain))
            {
                cache = imageCache;
            }
            Image image = cache.get(src);
            if (image == null)
            {
                image = super.loadImage(src);
                if (image != null)
                {
                    cache.put(src, image);
                }
                else
                {
                    cache.put(src, EMPTY_IMAGE);
                }
            }
            else if (image == EMPTY_IMAGE)
            {
                image = null;
            }
            return image;
        }
    };
    return g2c;
}

public static void renderXml(String xml, mxICanvas2D canvas) throws SAXException, ParserConfigurationException, IOException
{
    XMLReader reader = parserFactory.newSAXParser().getXMLReader();
    reader.setFeature("http://apache.org/xml/features/disallow-doctype-decl", true);
    reader.setFeature("http://apache.org/xml/features/nonvalidating/load-external-dtd", false);
    reader.setFeature("http://xml.org/sax/features/external-general-entities", false);
    reader.setFeature("http://xml.org/sax/features/external-parameter-entities", false);
    reader.setContentHandler(new mxSaxOutputHandler(canvas));
    reader.parse(new InputSource(new StringReader(xml)));
}

效果图顺便画的