欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 美食 > 【前端】JQ读取本地txt文本内容,并显示到页面上

【前端】JQ读取本地txt文本内容,并显示到页面上

2024/10/24 11:20:41 来源:https://blog.csdn.net/qq_25285531/article/details/143199223  浏览:    关键词:【前端】JQ读取本地txt文本内容,并显示到页面上

目录

需求:

效果图

示例代码


需求:

有一个本地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);
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com