vue-显示linux日志乱码，web终端组

工具

vue2.x + xterm.js

文档传送门：Xterm.js

问题描述：

系统中有要显示linux端日志的功能，后台去抓取，并用接口反回即可，但是它会有一些无符号字符串（\u001b），需要转换，可是又有一些类似"[1A"（linux平台下，用于控制颜色，格式等字符）特殊的字符，结果，我的输出内容就如下图所示，有些乱码

下图是应用了xterm.js后的对比，好在是没有乱码了。

1 安装   

注意：我是用cnpm方法安装的，有时候，Npm方法安装可能会报错，其实就是依赖中的某些版本问题，但还是根据自己的项目走即可

npm install xterm -s

插件：

fit：格式化插件，xterm.js本身是依赖于【列，行】的设置来控制宽度与高度且是固定死的，fit插件可以根据父元素来自适应你的界面

npm iinstall xterm-addon-fit -s

初始化代码，仅提取关键代码，后面组件里有完整代码

1 HTML部分
<div class="vi-console">
        <!-- terminal -->
        <div class="console" id="terminal"></div>
</div>
 
....
==============================================================
 
 
2 加载默认资源
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit';
import 'Xterm/css/xterm.css'
 
....
==============================================================
 
3 terminal窗体初始化，及自适应插件，初始化文字提示
const term = new Terminal() //初始化
 
const fitAddon = new FitAddon();//加载fit插件，仅用于窗口自适应
 term.loadAddon(fitAddon);
 
const myTerminal = document.getElementById('terminal') // DOM
term.open(myTerminal);
 
fitAddon.fit();//自适应界面
 
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')//初始化显示字符串
 
term.focus();
==============================================================

以上代码搞定后，你会得到如下界面，文字是write(”“)方法内的文字，有些字符你得去官网看是什么含义，但基本就是转义字符 

 ======================猥琐发育，别浪================================

2 组件代码

<template>
    <div class="vi-console">
        <!-- terminal窗体 -->
        <div class="console" id="terminal"></div>
    </div>
</template>
<script>
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit';
import 'Xterm/css/xterm.css'
 
export default {
    name: 'ViConsole',
    props: {
        terminalOptions: {
            type: Object,
            default () {
                return {
                    pid: 1,
                    name: 'terminal',
                    //cols: 140,//总列宽度，会影响到整体宽度
                    logLevel: 'error',
                    windowsMode: true,
                    fontWeight: '300',
                    //lineHeight: 2,//行高
                    cursorStyle: 'underline',
                    wordSeparator: '……',
                    theme: {
                        //terminal窗体样式设置
                        background: '#0c0c0c',//背景
                        foreground:'#c2c2c2',//所有文字颜色
                        cursor: '#fff',//光标颜色
                        selection: '#868686'//选择后背景颜色
                    }
                }
            }
        },
        log: {
            type: String,
            default: ""//传入的日志字符串，linux日志
        },
    },
    data () {
        let _this = this
        return {
            term: new Terminal(_this.terminalOptions)
        }
    },
    mounted () {
        let _this = this
        
        // 我的项目排版有点小问题，如果不加settimeout，样式会跑偏，默认情况下，_this.initTerm()即可
        setTimeout(() => {
            _this.initTerm()
        }, 200);
 
    },
    watch: {
        log (newVal, oldVal) {
            let _this = this
            if (newVal && newVal.length != 0) {
 
                //写入内容
                _this.writeTerm(newVal)
            }
        }
    },
    methods: {
        writeTerm (str) {
            //写入内容
            let _this = this
            _this.term.write(str)
        },
        initTerm () {
            let _this = this
 
            const fitAddon = new FitAddon();
            _this.term.loadAddon(fitAddon);
 
            const myTerminal = document.getElementById('terminal')
            _this.term.open(myTerminal);
            fitAddon.fit();
 
            _this.writeTerm('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
 
            _this.term.focus();
 
            // window.addEventListener('resize', _this.initTerm );
        },
    },
 
    beforeDestroy () {
        let _this = this
        //this.terminalSocket.close()
        _this.term.dispose()
    }
}
</script>
<style scoped>
.vi-console {
    width: 100%;
    min-height: 240px;
}
</style>

3 应用组件

log:是你的linux日志字符串，接入你自己的API

<vi-consoleVue  :log="你的日志代码"></vi-consoleVue>
 
//示例字符串，自己改下即可
log: "\n\u001b[1A\r\r正在节点 peer0.jgr.llkj.com 查询已安装链码...................................../成功.\r\u001b[1B\u001b[1A\r\r正在节点 peer0.jgr.llkj.com 查询已安装链码..................................... 成功.\r\u001b[1B\n\u001b[1A\rLabel: cclabel0.6.4  PackageID: cclabel0.6.4:8836beb355d04f846b2ccad8c5c2788a79f1e99a5523abab67cb22a37c31960d\r\u001b[1B\n\u001b[1A\r\r正在节点 peer0.qy1.llkj.com 查询已安装链码...................................../成功.\r\u001b[1B\u001b[1A\r\r正在节点 peer0.qy1.llkj.com 查询已安装链码..................................... 成功.\r\u001b[1B\n\u001b[1A\rLabel: cclabel0.6.4  PackageID: cclabel0.6.4:8836beb355d04f846b2ccad8c5c2788a79f1e99a5523abab67cb22a37c31960d\r\u001b[1B\n\u001b[1A\r\r正在节点 peer0.qy2.llkj.com 查询已安装链码...................................../成功.\r\u001b[1B\u001b[1A\r\r正在节点 peer0.qy2.llkj.com 查询已安装链码..................................... 成功.\r\u001b[1B\n\u001b[1A\rLabel: cclabel0.6.4  PackageID: cclabel0.6.4:8836beb355d04f846b2ccad8c5c2788a79f1e99a5523abab67cb22a37c31960d\r\u001b[1B\n\u001b[1A\r\r正在节点 peer0.qy3.llkj.com 查询已安装链码...................................../成功.\r\u001b[1B\u001b[1A\r\r正在节点 peer0.qy3.llkj.com 查询已安装链码..................................... 成功.\r\u001b[1B\n\u001b[1A\rLabel: cclabel0.6.4  PackageID: cclabel0.6.4:8836beb355d04f846b2ccad8c5c2788a79f1e99a5523abab67cb22a37c31960d\r\u001b[1B"

结论：

        我这个组件仅是显示一些Linux日志字符串功能，其实它还有很多方法，我暂时没应用上，如果你要开发web-shell组件，你就去官网好好看看其它API，开发完了记得共享哈！