参考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')