场景:从Linux服务器上拉取的日志内容里含有例如:[\u001b[33m、\u001b[0;39m]等带颜色的ANSI编码, 前端需解析后带样式渲染
方案:使用ansi_up github.com/drudru/ansi…
提示:1. 可选择使用pre标签
2.日志需滚动到底部时可使用scrollInto、scrollIntoView
例子:
.vue:
<div class="log-box"> <pre ref="log" v-html="content"></pre></div>
import { default as AnsiUp } from "ansi_up";
const ansi_up = new AnsiUp();
let logContentStr = ansi_up.ansi_to_html(logContent);
提供两个滚动方法
// 滚动到顶部
scrollTop() {
this.$nextTick(() => {
this.$refs.log.scrollIntoView();
});
},
// 滚动到底部
scrollBottom() {
this.$nextTick(() => {
this.$refs.log.scrollIntoView(false);
});
},