提问者:小点点

带有本地文件内容的本地html页面


我的机器上有一堆简单的纯文本文件,里面有关于我学习的各种主题的笔记。我决定用一些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访问本地文件是一个安全问题,我理解为什么会这样,但是没有解决这个问题的简单方法吗?如果我想要的只是在样式化框中显示的纯文本内容,我是否必须编写一些程序来将我的便笺文件转换为网页?


共2个答案

匿名用户

如果你想做这样的事情,你就得做些改变。如前所述,您不能从另一个本地文件中获取本地文件的内容;这确实是一个安全问题。

一种可能是自己把它放在服务器上。将文件放在服务器上的一个静态文件夹中,然后在服务器上创建一个页面,该页面可以对那些文件发出XMLHttpRequest(或fetch)请求并显示它们。

如果您没有web服务器,或者不希望它在internet上,您可以安装一个本地服务器--例如,使用Express和一个静态目录:

.use(express.static(path.join(process.cwd(), '/public')))

然后,您可以将文件放入文件系统的public目录中,并且可以从页面中提取这些文件。您可以使用类似于http://localhost:3000/的URL导航到此页面(检查您的Express配置以查看/更改端口)。

匿名用户

对于.txt文件,您可以做的样式并不多:您只能设置文本的字体和宽度,直到它换行到下一行为止。

  • 字体可以在浏览器设置中更改。大多数浏览器对monospace都有单独的字体设置,这里使用它。
  • 可以通过将.txt文件包含所需宽度的