【日志显示】vue实现前端展示后端带颜色的日志

需求: 实现前端展示后端带颜色的日志

通过loki获取项目产生的日志，并且在前端显示出来，一开始在没有经过处理的数据会显示一些乱码，并没有将字符转换

经过一番查询后，发现可以使用ansi_up来对日志进行操作颜色代码进行转化。

实现

使用ansi_up 实现

安装

npm install ansi_up

引入

import { AnsiUp} from 'ansi_up';

js使用

try {
    
        let res: any = await gameServerLog(params)
        console.log(res);
        if (res.code == 0) {
         var ansi_up = new AnsiUp()//声明
         textarea2.value = ansi_up.ansi_to_html(res.data)  //使用
        }
    } catch (error) {
        console.log(error);
    }

html渲染

需要使用v-html

 <div v-html="textarea2" style="white-space:normal"></div>

可能遇到的问题 br标签不换行

如若遇到br标签不换行，请参考如下，没有请忽略

const logData = ref('') //替换br
//监听替换br
watchEffect(() => {
    logData.value = textarea2.value.replace(/&lt;br\/&gt;/g, ' </br>');
})

html渲染也需更改

<div v-html="logData" style="white-space:normal"></div>

实现后效果