vue中xml文件的内容格式化和高亮显示

禾木白

已于 2022-11-23 14:50:19 修改

阅读量3.6k

点赞数

分类专栏： javascript vue 文章标签： xml 前端前端框架 vue.js javascript

于 2022-11-23 14:45:53 首次发布

本文链接：https://blog.csdn.net/weixin_42464106/article/details/127998622

版权

本文介绍了在Vue2项目中如何实现XML文件的格式化、高亮显示以及使用x2js进行XML与JSON转换。通过vkbeautify进行XML格式化，利用highlight.js实现XML高亮，并解决二次打开弹窗内容不更新的问题，以及借助x2js进行XML到JSON的转换。

摘要由CSDN通过智能技术生成

在项目中需求要展示xml文件，为了能够方便阅读，所以需要对xml文件的内容格式化和高亮显示。

示例

一、xml格式化--vkbeautify

二、xml高亮显示--highlight.js

三、xml解析--x2js

示例

示例：点击按钮，打开弹窗，请求xml内容并展示在弹窗中。(vue2项目示例)

//html:
<el-dialog title="xml详情" :visible.sync="XMLVisible"  width="50%">
    <div style="height:600px;overflow: auto;">
        <pre v-highlight>
            <code>{
  {xmlList}}</code>
        </pre>
    </div>
</el-dialog>

//js
showXML(id){
   if(!this.isAudit){
      return false;
   }
   this.loading = true;
   let url ='license/' + id +'.xml';
   this.$axios.get('/XMl/'+ url).then(res=>{
        if(res){
          this.xmlList = this.vkbeautify.xml(res.data);
          this.loading = false;
          this.XMLVisible = true;
        }else{