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