tool
vue2.x + xterm.js
Problem Description:
There is a function in the system to display Linux side logs. You can grab it in the background and return it using the interface. However, it will have some unsigned strings (\u001b) that need to be converted, but there are also some similar to "[1A" ( Under the Linux platform, it is used to control colors, formats and other characters) special characters. As a result, my output content is as shown in the figure below, with some garbled characters.
The picture below is the comparison after applying xterm.js. Fortunately, there is no garbled code.
1 installation
Note: I installed it using the cnpm method. Sometimes, the Npm method installation may report an error. In fact, it is due to some version problems in the dependencies, but you can still follow your own project.
npm install xterm -s
Plugin:
fit: Formatting plug-in, xterm.js itself relies on the setting of [column, row] to control the width and height and is fixed. The fit plug-in can adapt to your interface according to the parent element.
npm install xterm-addon-fit -s
Initialization code, only the key code is extracted, and the complete code is in the subsequent components
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();
==============================================================
After the above code is completed, you will get the following interface. The text is the text in the write("") method. You have to go to the official website to see the meaning of some characters, but they are basically escape characters.
====================== Don't waste your wretched development======================== =========
2 component code
<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 application components
log: is your linux log string, connected to your own 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"
in conclusion:
My component only displays some Linux log string functions. In fact, it has many methods. I have not applied them yet. If you want to develop web-shell components, you should go to the official website to take a good look at other APIs. Remember to share them after development. !