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

Question

我的机器上有一堆简单的纯文本文件，我在其中记录了我研究的各种主题或其他内容。 我决定制作一个本地 html 页面，其中包含一些 css 以快速简单地使用 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 样式显示，所以我认为解决这个问题的方法是获取这些本地文件并将它们放入这个 content_box div一个 onclick 事件并禁用默认事件或将标签交换为其他标签。 问题是我不知道如何在本机 js 中读取本地文件？ 我阅读了这件事，我得到的是让 javascript 访问本地文件是一个安全问题，我理解为什么会这样，但是这个问题没有简单的解决方法吗？ 如果我想要的只是在程式化框中显示的纯文本内容，我是否必须编写一些程序来将我的笔记文件转换为网页？

Answer 1

如果你想做这样的事情，你必须做一些改变。 正如您所说，您无法从另一个本地文件中获取本地文件的内容； 这确实是一个安全问题。

一种可能性是自己将其放在服务器上。 将文件放在服务器上的 static 文件夹中，然后在服务器上创建一个页面，该页面可以对这些文件发出 XMLHttpRequest（或获取）请求并显示它们。

如果您没有 web 服务器，或者不希望它在 Internet 上，您可以安装本地服务器 - 例如，使用Express和 static 目录：

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

然后，您可以将文件放入文件系统上的public目录中，并且可以从您的页面中获取它们。 您将能够使用类似于http://localhost:3000/的 URL 导航到此页面（检查您的 Express 配置以查看/更改端口）。

Answer 2

无论如何，您无法对.txt文件进行太多样式设置：您只能设置文本的字体和宽度，直到它换行到下一行。

可以在浏览器设置中更改字体。 大多数浏览器都有单独的等宽字体设置，在这里使用。
可以通过在.txt文件中包含所需宽度的<iframe>来更改宽度。

这可能不完全符合您的要求，但另一种方法是创建一个简单的服务器，这并不难，但肯定会涉及更多。

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-03-27 14:19:25

解决方案2
0 2021-03-27 14:26:22

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-03-27 14:19:25

解决方案2 0 2021-03-27 14:26:22

解决方案1
1 已采纳 2021-03-27 14:19:25

解决方案2
0 2021-03-27 14:26:22