奇怪的需求-前端直接显示xml文件内容

需求：后端将xml文件里面的内容以base64的格式返回给前端，前端解析这个base64编码，得到一个包含xml内容的字符串，然后按照xml的规则（标签缩进）在页面上显示，最后设置高亮

一步步来吧

解码base64编码

html自带一个解码的方法：window.atob() 将得到的base64作为参数调用这个函数即可。当然还有window.btoa()这个方法，感兴趣自行了解

将字符串按照xml规则显示

有两个思路，一个自己写JS逻辑实现，一个是找外部的插件。

我这么懒肯定是找插件啊~

网上寻找的时候看到说有用x2js这个插件的，也有用vkbeautify这个插件的，感觉使用方法挺简单的，但是我这个项目上就是不管用啊啊啊啊啊啊！！！！！ 大家可以自己搜搜这两个插件 ，俺就不给链接了

然后我问了我们前端的大佬，说有个xml-formatter这个插件：戳这里

可以自己设置options

**踩坑点：**vue可以使用v-text或者v-html展现文本

​ 浏览器会默认不执行/b /n /t 这类型格式符，需要加上 pre 标签才能实现 在前端按照xml格式显示文本的需求

​ 第一行会有一个很奇怪的缩进，可以在v-text中拼接一个’\n’直接回车无视掉。（其实是我没找到消除这个缩进的办法）

给xml显示的区域设置高亮

通过设置CSS3 的 filter参数，实现高亮。然后给div设置背景颜色就可以了

还可以加滤镜，还可以设置曝光，filter真的很好用！！