HTML
<template>
<div>
<input type="file" id="file"/>
<div v-html="svgDom"></div>
</div>
</template>
JS
export default {
data () {
return {
svgDom: ''
}
},
methods: {
stringToXml(data) {
var xmlDoc
if (document.implementation.createDocument) {
var parser = new DOMParser()
xmlDoc = parser.parseFromString(data, 'text/xml')
}
return xmlDoc
}
},
mounted () {
const el = document.getElementById('file')
const _this = this
el.addEventListener('change', ev => {
const [file] = ev.target.files
const reader = new FileReader()
reader.onload = e => {
const resXML = _this.stringToXml(e.target.result)
const domEl = resXML.documentElement.cloneNode(true)
var oSerializer = new XMLSerializer()
this.svgDom = oSerializer.serializeToString(domEl)
}
reader.readAsText(file)
})
}
}