ansiparser 前端组件 项目简介
ansiparser是一个前端组件，用于将linux终端输出的彩色日志展示到web页面。它通过解析linux终端的ansi转义字符实现彩色渲染，其渲染效果如下图。安装npm install xlog-ansiparser --save使用<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./dist/xlog-1.0.0.js"></script>
<link rel="stylesheet" href="./xlog.css">
<style>
body{
margin: 0;
}
</style>
</head>
<body>
<pre id="xlog" class="dark">
</pre>
</body>
<script>
var container = document.getElementById("xlog")
var lexer = new XLog(container)
$(document).ready(function (e) {
$.ajax({
method: "GET",
url: "https://api.travis-ci.org/v3/job/31095019/log.txt",
success: function (data) {
let segs = data.split("\n");
segs.forEach((v, i) => {
setTimeout(() => {
let substr = v;
if (segs.length !== i + 1) {
substr = substr + "\n"
}
lexer.write(substr)
}, 0)
})
}
})
});
</script>
</html>源码仓库https://github.com/duguying/ansiparser
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./dist/xlog-1.0.0.js"></script>
<link rel="stylesheet" href="./xlog.css">
<style>
body{
margin: 0;
}
</style>
</head>
<body>
<pre id="xlog" class="dark">
</pre>
</body>
<script>
var container = document.getElementById("xlog")
var lexer = new XLog(container)
$(document).ready(function (e) {
$.ajax({
method: "GET",
url: "https://api.travis-ci.org/v3/job/31095019/log.txt",
success: function (data) {
let segs = data.split("\n");
segs.forEach((v, i) => {
setTimeout(() => {
let substr = v;
if (segs.length !== i + 1) {
substr = substr + "\n"
}
lexer.write(substr)
}, 0)
})
}
})
});
</script>
</html>源码仓库https://github.com/duguying/ansiparser