drawio导出xml解码封装utils,用于mxgraph渲染

1,284 阅读1分钟

参考drawio的drawio-tools,用于解码drawio导出的xml文件,产出mxgraph能识别的xml,用于mxgraph渲染,核心是利用pako

封装

const pako = require('pako')

function decode (data) {
  try {
    var node = parseXml(data).documentElement
    if (node != null && node.nodeName === 'mxfile') {
      var diagrams = node.getElementsByTagName('diagram')
      if (diagrams.length > 0) {
        data = getTextContent(diagrams[0])
      }
    }
  } catch (e) {
    // ignore
  }
  try {
    data = atob(data)
  } catch (e) {
    console.log(e)
    alert('atob failed: ' + e)
    return
  }
  try {
    data = pako.inflateRaw(Uint8Array.from(data, c => c.charCodeAt(0)), {
      to: 'string'
    })
  } catch (e) {
    console.log(e)
    alert('inflateRaw failed: ' + e)
    return
  }
  try {
    data = decodeURIComponent(data)
  } catch (e) {
    console.log(e)
    alert('decodeURIComponent failed: ' + e)
    return
  }
  return data
};
function parseXml (xml) {
  if (window.DOMParser) {
    var parser = new DOMParser()
    return parser.parseFromString(xml, 'text/xml')
  } else {
    var result = createXmlDocument()

    result.async = 'false'
    result.loadXML(xml)

    return result
  }
};
function createXmlDocument () {
  var doc = null
  if (document.implementation && document.implementation.createDocument) {
    doc = document.implementation.createDocument('', '', null)
  } else if (window.ActiveXObject) {
    // eslint-disable-next-line no-undef
    doc = new ActiveXObject('Microsoft.XMLDOM')
  }
  return doc
};
function getTextContent (node) {
  return (node != null) ? node[(node.textContent === undefined) ? 'text' : 'textContent'] : ''
};

export default decode

使用

import drawDecode from "./drawDecode.js";
    drawDecode('draw.xml')