在线制作证件照免费_北京网站建设哪家设计好_搜索引擎调词平台多少钱_洛阳搜索引擎优化

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

通过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>

实现后效果