前端将后端返回的带颜色的数据进行转换

因为之前在调用后端接口的时候 后端返给我的数据显示乱码：具体如下图所示：


然后这些数据 在后台显示的是这样的的，如下图所示：

根据以上这三幅图片可以看到有些数据 在后台显示的时候 有些代码是带颜色的，而在前端显示的时候 会显示成乱码。所以我们可以根据这个特点去想，怎么在网页上显示终端的颜色。

解决方法(ansi)在网页中显示终端颜色

终端命令为了可以友好的显示大多数都支持了颜色显示。 在终端中良好的颜色显示， 能够让我们处理问题更加高效，但是在运维开发中， 难免要在 web 网页中操作服务器, 难免要执行这些命令并且要显示在终端中.。
除了友好的显示为等宽字体外， 显示这些颜色也是有必要的， 因为终端的颜色代码如果直接显示会很奇怪， 更加会干扰我们的信息。

ansi_up 库可以把终端颜色代码自动转换成 html 格式颜色样式， 让 web 显示终端颜色更加方便。

项目地址: https://github.com/drudru/ansi_up

ansi_up是易于使用的库，可将包含ANSI颜色转义码的文本转换 为HTML。该模块是一个没有依赖性的Javascript文件。它是“同构” javascript。这只是说ansi_up.js文件在浏览器或node.js中都可以使用的另一种说法。js库是从TypeScript编译的，其类型描述随NPM一起提供。该代码自2011年以来已在生产中使用，并一直得到积极维护。

html代码**

<script src="ansi_up.js" type="text/javascript"></script>
<script type="text/javascript">

  var txt  = "\n\n\033[1;33;40m 33;40  \033[1;33;41m 33;41  \033[1;33;42m 33;42  \033[1;33;43m 33;43  \033[1;33;44m 33;44  \033[1;33;45m 33;45  \033[1;33;46m 33;46  \033[1m\033[0\n\n\033[1;33;42m >> Tests OK\n\n"

  var ansi_up = new AnsiUp;

  var html = ansi_up.ansi_to_html(txt);

  var cdiv = document.getElementById("console");

  cdiv.innerHTML = html;

</script>

 

node代码

var AU = require('ansi_up');
var ansi_up = new AU.default;

var txt  = "\n\n\033[1;33;40m 33;40  \033[1;33;41m 33;41  \033[1;33;42m 33;42  \033[1;33;43m 33;43  \033[1;33;44m 33;44  \033[1;33;45m 33;45  \033[1;33;46m 33;46  \033[1m\033[0\n\n\033[1;33;42m >> Tests OK\n\n"

var html = ansi_up.ansi_to_html(txt);

 

typescript代码

import {
    default as AnsiUp
} from 'ansi_up';

const ansi_up = new AnsiUp();

const txt  = "\n\n\x1B[1;33;40m 33;40  \x1B[1;33;41m 33;41  \x1B[1;33;42m 33;42  \x1B[1;33;43m 33;43  \x1B[1;33;44m 33;44  \x1B[1;33;45m 33;45  \x1B[1;33;46m 33;46  \x1B[1m\x1B[0\n\n\x1B[1;33;42m >> Tests OK\n\n"

let html = ansi_up.ansi_to_html(txt);

 

以上三种方式就是官方文档提供的三种方式。
我的项目中使用的是第二种node的方式，所以转义之后，会出现现’＆'字符。
这时我在显示返回结果的地方使用了v-html,就皆大欢喜啦，之后 可能还需要对显示在网页中的格式进行一下调整。

white-space: pre-wrap;
word-break: break-word;
background: #ffffff;

 

可以使用以上显示的css代码来进行调整哦！

如果大家在前端上有什么问题，可以一起进行交流哦；
可能写的不是很好，望见谅！也欢迎各位大神指出问题。