【前端Vue】如何优雅地展示带行号的日志文件或文本内容（log-viewer组件的使用）

        由于需要在前端使用浏览器展示大量数据的文件，展示方式的优化非常重要，自己手敲实现的话太耗时间并且容易出现bug，经过多轮查找调研，排除了ace-editor，选用了log-viewer，ace-editor的组件UI设计比较现代化，较log-viewer更美观，并且支持多种配置项，官方宣称能够处理代码多达400万行的大型文档。但我使用在自身项目中非常容易出现卡顿，正常内容要限制1000行才会比较流畅，这并不符合我的需求。

        于是我们发现了log-viewer，这个组件的UI非常普通，就像终端命令行一样，但他的性能优化非常漂亮，并且使用也很方便，能够自动将内容定位到最后一行，不需要自己写定位代码，省去了很多麻烦，就是如果对界面UI要求比较高的话，需要推敲修改其布局设计，当然，这比适配优化浏览性能简单得多。实际测试下来可以较丝滑地展示80万行的内容，但是最大显示限度被设置在了838860行，往后的将无法显示。

接下来将展示log-viewer的应用方式，首先需要在methods中将需要显示的内容处理好存放到一个绑定值中，以便于在渲染标签处绑定log-viewer的log属性，不论是从本地获取还是从后端接口获取。

fetchRemoteFile() {const filePath = this.currentFilePath;if (!filePath) {this.error = '未选择文件';this.loading = false;return;}getFileContent(filePath).then(response => {this.fileContent = response.data;this.loading = false;}).catch(error => {console.error('获取文件内容失败:', error);this.error = '获取文件内容失败: ' + (error.message || '未知错误');this.loading = false;});},

我当前通过传递一个文件路径filePath给后端，通过getFileContent接口获取到文件内容response.data存在fileContent当中，在标签中就需要使用到fileContent。

<log-viewer:log="fileContent"style="height: 100%;"
/>

:log就是绑定的属性，用于显示fileContent的内容，如果需要加载动画的话可以加上:loading="isLoading"，需要自行编写触发和关闭加载的时机；如果不需要显示行号的话就加上:hasNumber="false"。

使用该组件前需要先引入组件，使用vue开发的话先用npm进行安装

npm install @femessage/log-viewer

然后在页面中引入

import LogViewer from '@femessage/log-viewer';
export default {name: 'LogPage',components: {LogViewer},
}
data() {return {loading: false,fileContent: '',currentFilePath: ''}
}

最后再根据你的需求调整完成后就能正常显示了。

附上组件的项目地址：

GitHub - FEMessage/log-viewer：💻在浏览器中查看终端日志