前端將后端返回的帶顏色的數據進行轉換

因為之前在調用后端接口的時候 后端返給我的數據顯示亂碼：具體如下圖所示：


然后這些數據 在后台顯示的是這樣的的，如下圖所示：

根據以上這三幅圖片可以看到有些數據 在后台顯示的時候 有些代碼是帶顏色的，而在前端顯示的時候 會顯示成亂碼。所以我們可以根據這個特點去想，怎么在網頁上顯示終端的顏色。

解決方法(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代碼來進行調整哦！

如果大家在前端上有什么問題，可以一起進行交流哦；
可能寫的不是很好，望見諒！也歡迎各位大神指出問題。