记一次ANSI编码转html串

800 阅读1分钟

场景:从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);      
    });    
  },