目录
需求：
有一个本地txt文件，把txt文件的内容按照原格式显示到页面上。
有两种解决方案，但是只支持UTF8编码的txt文件，如果是其他编码请转换成UTF8，这里有一个批量转换工具可以下载使用https://download.csdn.net/download/qq_25285531/89918384
方法一：利用JQ读取文件内容 ，并直接显示到页面上，不带格式；
方法二：后端先读取txt文件，取出文本内容，返回给前端，在页面上显示，这种通过字符串替换可以达到原文本样式的效果。
效果图
原txt文档
方法一效果图（不带格式）
方法二效果图（带格式）
示例代码
方法一（不带格式）
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/static/index/js/jquery-1.11.3.min.js"></script>
</head>
<body>
<button id="readBtn">读取txt文本内容</button>
<div id="txtContent">
</div>
</body>
<script>
$(document).ready(function () {
$('#readBtn').click(function () {
console.log(11)
$.get('/uploads/aaa.txt',function (data) {
console.log(data)
$('#txtContent').text(data)
})
})
})
</script>
</html>方法二（带格式）
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/static/index/js/jquery-1.11.3.min.js"></script>
</head>
<body>
<button id="readBtn">读取txt文本内容</button>
<div id="txtContent">
</div>
</body>
<script>
$(document).ready(function () {
$('#readBtn').click(function () {
$.ajax({
url:'getTxt',
dataType:'JSON',
success:function (res) {
console.log(res)
$('#txtContent').html(res.data)
}
})
})
})
</script>
</html>后端（PHP）
public function getTxt()
{
$filename = ROOT_PATH.'public'.DS.'uploads'.DS.'aaa.txt';
$fileContent = file_get_contents($filename);
if ($fileContent === false) {
die("Failed to read the file");
}
$fileContent = str_ireplace("\r\n","<br/>",$fileContent);
return apiResponse('200','success',$fileContent);
}本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 【前端】JQ读取本地txt文本内容，并显示到页面上
发表评论 取消回复