Question

我正在尝试使用HTML5和JavaScript读取文本文件（日志文件），但我不知道如何解析或格式化文本。

如果我使用像Gedit或Sublime Text这样的文本编辑器打开日志文件，我可以看到格式化的所有内容。但是，如果我通过HTML文档在屏幕上显示文本，则文本没有顺序...我认为问题是由于换行...我如何强制换行？

以下是代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Leer archivo de texto</title>

<style>
div {
margin-top: 30px;
border: solid 1px black;
padding: 5px;
}
</style>

<script>

function processFiles(files) {
var file = files[0];

var reader = new FileReader();

reader.onload = function (e) {
// Cuando éste evento se dispara, los datos están ya disponibles.
// Se trata de copiarlos a una área <div> en la página.
var output = document.getElementById("fileOutput"); 
output.textContent = e.target.result;
};
reader.readAsText(file);
}

</script>
</head>

<body>
<input id="fileInput" type="file" size="50" onchange="processFiles(this.files)">
<div id="fileOutput"></div>
</body>
</html>

非常感谢你们。

Answer 1

我相信你可以通过white-space: pre-line

的样式来完成你所追求的目标

<div id="fileOutput" style="white-space: pre-line;"></div>

有关详情，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

使用Javascript和HTML 5上的FileReader解析/格式化本地文本文件

1 个答案: