目录
需求:
有一个本地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文本内容,并显示到页面上
发表评论 取消回复