构建可以处理本地文件的 Web 应用程序

Posted 2023-03-22

【中文标题】构建可以处理本地文件的 Web 应用程序

【英文标题】：Building a web application that can work with local files

【发布时间】：2019-07-11 09:31:50

【问题描述】：

我想通过对 UI 使用前端 Web 技术来构建一个应用程序（本地，而不是在线），该应用程序只显示 PDF 并有一些文本字段供用户填写关于当前他们正在查看的 PDF，然后用户可以将他们的笔记和文件路径导出到 CSV 文件格式的文档。

comment about file, some more notes, C:\somefolder\doc1.pdf

comment about file, some more notes, C:\somefolder\doc2.pdf

我的第一个问题，javascript 无法访问本地文件系统，所以我使用了一个文件上传表单，除了文件路径显示为 blob 文件路径而不是实际的系统文件路径之外，该表单有效。除此之外，我的“应用程序”按预期工作。

我去学习了 Flask，希望将 python 用于后端，这很好用，除非我将文件路径传递给 pdf C:\SomeFolder\doc1.pdf 在 Chrome 的 'src' 属性中说它无法访问本地文件。所以我又回来了！

如何构建具有本地文件访问权限的应用程序？

【参考方案1】：

如果您需要访问本地文件，您可以在烧瓶中创建一个端点来启动文件对话框 GUI。这仅适用于您的应用程序在本地托管。您可以使用tkinter 或使用win32ui 的本机Windows API。

假设您使用的是标准 Flask 格式：

from app import app

@app.route('/file_select', methods=['GET', 'POST'])
def file_select():
    from tkinter import Tk
    from tkinter.filedialog import askopenfilename
    root = Tk()
    root.withdraw()
    # ensure the file dialog pops to the top window
    root.wm_attributes('-topmost', 1)
    fname = askopenfilename(parent=root)
    return jsonify('filepath': fname)

或使用 win32ui API

@app.route('/file_select', methods=['GET', 'POST'])
def file_select():
    import win32ui
    winobj = win32ui.CreateFileDialog(1, ".pdf", "", 0, 
        "PDF Files (*.pdf)|*.pdf|All Files (*.*)|*.*|")
    winobj.DoModal()
    return jsonify('filepath': winobj.GetPathName())

现在只需添加一个指向/file_select 路由的按钮，您将通过python本地服务器打开一个文件对话框并返回所选文件。

【参考方案2】：

假设您通过http://localhost:8080/page 或类似方式访问该页面，您应该通过该方法提供您的内容。实际上，不是将文件作为本地文件系统上的路径提供，而是创建应用程序路由并将其与处理程序相关联，而不是从本地文件系统检索适当的 PDF，然后在 HTTP 中发回包含 Content-Type: application/pdf 的响应响应头和响应正文中 PDF 文件的字节。

为避免重复其他人的解决方案，我建议您查看this answer for "Flask handling a PDF as its own page"。

因为从技术上讲，您是从 localhost 或您使用的任何名称发送回响应，而不是尝试直接从客户端的网页加载本地文件，Chrome 不应该提出任何投诉.

当然，值得注意的是，在确定要加载的文件时应采取最佳做法，如果这不仅仅是一个学习项目的话。在任何做这种事情的合法系统中，有必要对请求的文件进行检查，以确保恶意用户不会滥用应用程序从本地文件系统泄漏文件，超出那些打算提供的文件。 （为此，您通常可能让 src 元素包含一个参数，该参数设置为文件的哈希/唯一 ID，然后通过某个数据库映射到文件的正确路径。或者，您可以使用src 中的参数，其中包含没有完整路径的文件名，然后检查请求中该参数的用户提供的值不包含字符集之外的任何字符，例如 [a-zA-Z0-9_-]。）最终，听起来这个特定的警告不适用于您的案例，但仍会提供它以防其他人在将来阅读此内容。

【参考方案3】：

我认为 mht 正是您想要的。 mht 是 IE 识别的文件扩展名。在内部，它是一个 html 文件。 IE（仅）使用与 exe 相同的安全限制来处理 mht 文件。您可以访问文件系统、删除文件、显示文件等。这是 html/javascript 安全性试图阻止的一切。现在 IE 已经发生了重大变化，我不知道现在对此的支持是什么。我找不到提供链接的参考页面，但它很简单 - 只需保存一个带有 mht 扩展名的 html 文件