vue中如何显示格式化的xml文本

JavaScript019

vue中如何显示格式化的xml文本,第1张

最近在做项目时遇到的，有一个功能返回是一个xml文本，需要很友好的显示在html中。

前端的框架是vue。

调研了一些格式化xml的网站找到了答案，发现了两个很好的库：vkbeautify & vue-highlightjs，前者主要是用来格式化xml，后者是将code里的xml都加上标签，这样我们就可以很轻易的通过样式来控制标签的颜色、粗细等样式了。

npm install vkbeautify --save

npm i vue-highlight.js --save

基本使用方法：

首先要在main.js

模板中

IE浏览器

var xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”)

xmlDoc.async=“false”//同步加载方式

xmlDoc.load(“note.xml”)//加载文件

var txt ="<root>aaa</root>"

xmlDoc.loadXML(txt)//加载xml格式字符串

其他浏览器

//加载文件

var xmlDoc=document.implementation.createDocument(“”,“”,null)

xmlDoc.async=“false”

xmlDoc.load(“note.xml”)

//加载xml格式字符串

var txt ="<root>aaa</root>"

var parser=new DOMParser()

var doc=parser.parseFromString(txt,"text/xml")

跨浏览器访问是禁止的，xml文档与加载他的文件应该在同一个域名下

xml解析器加载xml文件或字符串后返回一个xml文档对象，然后可以使用该对象调用xml相关解析方法对加载的xml数据进行解析