VUE渲染SVG文件

498 阅读1分钟

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) {
        // DOMParser 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document
        // https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser
        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)
          
          // 将 DOM 树转换为 XML 或 HTML 源
          var oSerializer = new XMLSerializer()
          // 返回 DOM 子树序列化后的字符串
          this.svgDom = oSerializer.serializeToString(domEl)
        }
        reader.readAsText(file)
      })
    }
  }