vue实现前端展示后端实时日志带颜色示例详解

npm install ansi_up

import {default as AnsiUp} from 'ansi_up';

this.logs = res.data.result[0].values
var ansi_up = new AnsiUp()
for (const i in res.data.result[0].values) {
  this.logs[i][1] = ansi_up.ansi_to_html(res.data.result[0].values[i][1])
}

<div v-for="(log, index) in logs" :key="index">
  <div v-html="log[1]" style="margin-bottom: 5px; font-size: 16px"></div>
</div>

$ npm install ansi_up

import {default as AnsiUp} from 'ansi_up';

var ansi_up = new AnsiUp;
var html = ansi_up.ansi_to_html(txt);   //调用ansi_to_html()方法，txt就是从后端拿到的json数据
var statusLog= document.getElementById("statusLog"); //statusLog 即是页面需要展示内容的div
statusLog.innerHTML = html;