ansi_up---实现后端实时日志(带颜色)前端展示

1.需求：

项目是一个管理系统，当执行安装任务时，需要把后端安装过程中的日志推送到前端，前端在页面上展示实时进度，并且与终端显示的颜色保持一致。
用websocket或者前端设置定时器的方式，定时去获取后端的json数据比较简单，比较纠结的是怎么显示颜色，方便用户直观看到安装过程中的进度，报错等信息。

后端拿到的json数据：

可以看到ansi 的颜色代码就好像乱码一样，如果直接展示到页面上，是不会转换ansi 的颜色代码，看到的就类似一个普通的txt文本，用户没法直观看到想要的信息。

2.解决

对ansi 的颜色代码进行转化，输出在页面上，需要用到的插件：ansi_up

项目地址：[ansi_up](https://github.com/drudru/ansi_up)

2.1 安装

$ npm install ansi_up

2.2 引入

import {default as AnsiUp} from 'ansi_up';

2.3 使用

var ansi_up = new AnsiUp;var html = ansi_up.ansi_to_html(txt);   //调用ansi_to_html()方法，txt就是从后端拿到的json数据var statusLog= document.getElementById("statusLog"); //statusLog 即是页面需要展示内容的divstatusLog.innerHTML = html;

3.效果

ansi_up---实现后端实时日志(带颜色)前端展示相关推荐

前端将后端返回的带颜色的数据进行转换
前端将后端返回的带颜色的数据进行转换因为之前在调用后端接口的时候后端返给我的数据显示乱码:具体如下图所示: 然后这些数据在后台显示的是这样的的,如下图所示: 根据以上这三幅图片可以看到有些数据 ...
base64图片展示（后端给base64数据，前端展示图片）
<img :src="imageData" alt="" class="sign-img-style"> <script& ...
[py]access日志入mysql-通过flask前端展示
目录 pymysql组装sql入库日志代码组织将入库的日志通过flask前端展示 pymysql组装sql入库日志 pymysql模块的用法采集这些指标(metirc)都是linux环境,会用到 ...
React:后端返回pdf数据流，前端打开页面预览，使用fetch，PDFObject
预览页面: import React, { useEffect } from 'react'; import { connect } from 'react-redux'; import PropTy ...
webstorm前端调用后端接口_一篇前端同学对后端接口的吐槽
来源:juejin.im/post/5cfbe8c7e51d4556da53d07f 前言去年的某个时候就想写一篇关于接口的吐槽,当时后端提出了接口方案对于我来说调用起来非常难受,但又说不上为什么, ...
大数据主题分享第三期 | 基于ELK的亿级实时日志分析平台实践
猫友会希望建立更多高质量垂直细分社群,本次是"大数据学习交流付费群"的第三期分享. "大数据学习交流付费群"由猫友会联合,斗鱼数据平台总监吴瑞诚,卷皮BI技术总 ...
ELK实时日志分析平台环境部署--完整记录
在日常运维工作中,对于系统和业务日志的处理尤为重要.今天,在这里分享一下自己部署的ELK(+Redis)-开源实时日志分析平台的记录过程(仅依据本人的实际操作为例说明,如有误述,敬请指出)~ ==== ...
网页版本的飞行日志分析平台是_一个轻便的实时日志收集平台wslog
一个轻便的实时日志收集平台wslog wslog原理利用github.com上无数的slack hook 日志工具sdk 遵循 slack hook API 规范 https://api.slack ...
小白玩大数据日志分析系统经典入门实操篇FileBeat+ElasticSearch+Kibana 实时日志系统搭建从入门到放弃
大数据实时日志系统搭建距离全链路跟踪分析系统第二个迭代已经有一小阵子了,由于在项目中主要在写ES查询\Storm Bolt逻辑,都没有去搭建实时日志分析系统,全链路跟踪分析系统采用的开源产品组合为F ...