js---读取本土.txt文件

2,108 阅读2分钟

js读取本地文件

需求:

在本地静态环境下,实现js读取同目录下txt,相当于小白在txt配置一些内容,将配置应用到网页上,大家一般会想到ajax加载,我第一时间想的也是,于是在网上搜罗了几个可行的方法,在本地localhost环境下完美实现,就在我嘴角刚刚弯起的时候,领导告诉我,我跑题了,这个功能做出来将来要给小白用的,不可以搭建本地环境,如果不运行环境的话会存在跨域问题。

方案:

方案一:解决跨域问题,设置浏览器的运行模式等等,百度上一大片,可没有一个是好使的,可能是我需求太铁了。

方案二:使用IE独有的ActiveXObject(只IE支持),由于需求来自于政府机关,多少IE浏览器,正合需求,于是就采取ActiveXObject来读取TXT。

txt文件

image.png

上代码:

var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile("D:\工作材料\project\历史上的今天\project\word.txt"); //这里必须为绝对路径
//读取第一行,获得字号
var fontSize = f.ReadLine().replace(/[^0-9]/ig, ""), str = "";
// 循环剩余行,拿到文本
while (!f.AtEndOfStream) {
    str += f.ReadLine();
}
$(".content").html(str).css({
    "font-size": fontSize + "px",
    "line-height": (fontSize * 2 - 6) + "px"
});

含义:

new ActiveXObject("Scripting.FileSystemObject"); // 建立文件系统对象(只有IE中存在)

fso.OpenTextFile("D:\xxx\xxxx\xxxx\xxxxx\word.txt"); //读取txt文件,这里很局限,必须要用绝对路径。原因就不深入刨析了,js的文件系统知识还是很多的。

f.ReadLine().replace(/[^0-9]/ig, "") //OpenTextFile读取到的内容会按换行分割成多个对象,f.ReadLine()是读取一行对象,如果OpenTextFile读取了5行内容,那么就需要5次f.ReadLine才可以获得到所有内容。这里.replace(/[^0-9]/ig, "")要把第一行内容的数字拿到,进而设置字体大小和行高。

循环取得所有文本内容

while (!f.AtEndOfStream) { str += f.ReadLine(); }

设置内容并设置效果

结语:

记录技术日常,将碰到的不常见需求斩于马下,通过学习工作,会发现许多的盲区与不足,遇到难题一定要沉下心切忌浮躁。