我的机器上有一堆简单的纯文本文件,里面有关于我学习的各种主题的笔记。我决定用一些css做一个本地html页面,作为快速和简单的和css美化的视图到这些文件中,并使用浏览器来显示它们。所以我有一个页面看起来是这样的。
<html>
...
<body>
<ul ...>
<li> <a href="C:/.../Note1.txt">Note1</a> </li>
<li> <a href="C:/.../Note2.txt">Note2</a></li>
...
<li> <a href="C:/.../NoteN.txt">NoteN</a></li>
</ul>
<div name="content_box" ...> </div>
</body>
</html>
很明显,单击链接会将我引导到文本文件,但我希望它以css样式显示,所以我认为解决这个问题的方法是获取这些本地文件,并使用onclick事件将它们放入content_box div中,禁用默认事件或将标记交换为其他标记。问题是我不知道如何在原生js中读取本地文件?我阅读了这个问题,我得到的是让javascript访问本地文件是一个安全问题,我理解为什么会这样,但是没有解决这个问题的简单方法吗?如果我想要的只是在样式化框中显示的纯文本内容,我是否必须编写一些程序来将我的便笺文件转换为网页?
如果你想做这样的事情,你就得做些改变。如前所述,您不能从另一个本地文件中获取本地文件的内容;这确实是一个安全问题。
一种可能是自己把它放在服务器上。将文件放在服务器上的一个静态文件夹中,然后在服务器上创建一个页面,该页面可以对那些文件发出XMLHttpRequest(或fetch)请求并显示它们。
如果您没有web服务器,或者不希望它在internet上,您可以安装一个本地服务器--例如,使用Express和一个静态目录:
.use(express.static(path.join(process.cwd(), '/public')))
然后,您可以将文件放入文件系统的public
目录中,并且可以从页面中提取这些文件。您可以使用类似于http://localhost:3000/
的URL导航到此页面(检查您的Express配置以查看/更改端口)。
对于.txt
文件,您可以做的样式并不多:您只能设置文本的字体和宽度,直到它换行到下一行为止。
.txt
文件包含所需宽度的
来更改宽度。这可能不完全是您所要求的,但另一种选择是创建一个简单的服务器,这不一定很难,但肯定会更复杂一些。