在pywebview中实现文件拖拽获取完整路径的技术方案

2025-06-09 19:16:17作者：齐冠琰

背景介绍

pywebview是一个轻量级的跨平台库，它允许开发者使用原生GUI窗口来显示HTML内容。在实际开发中，经常需要实现文件拖拽功能并获取文件的完整路径。然而，由于浏览器的安全限制，JavaScript无法直接获取本地文件系统的完整路径。

技术挑战

传统的Web开发中，浏览器出于安全考虑会限制JavaScript访问本地文件系统的完整路径。当用户拖拽文件到网页时，浏览器只会提供有限的文件信息。这在pywebview环境中同样适用，即使应用运行在本地环境中。

解决方案

pywebview提供了独特的解决方案，通过Python和JavaScript的交互来绕过这个限制。具体实现步骤如下：

Python端监听拖拽事件：在Python中设置拖拽事件监听器，当用户拖拽文件到窗口时触发回调函数。
获取完整路径：在Python回调函数中，通过pywebview提供的API获取文件的完整系统路径。
传递路径到前端：使用evaluate_js方法将路径信息发送回前端JavaScript环境。
前端接收路径：通过自定义事件机制，JavaScript监听并处理从Python端发送过来的路径信息。

实现代码示例

import webview
from webview.dom import DOMEventHandler
from webview.window import Window

def fire_full_path_event(path: str) -> str:
    return f"""
    const event = new CustomEvent("pywebviewDrop", {{
      detail: {{ 
        pywebviewFullPath: "{path}"}},
    }});
    window.dispatchEvent(event);
    """

def on_drop(e, w: Window):
    files = e["dataTransfer"]["files"]
    if len(files) == 0:
        return

    for file in files:
        filePath = file.get("pywebviewFullPath")
        if filePath:
            w.evaluate_js(fire_full_path_event(filePath))

def bind(window):
    window.dom.document.events.drop += DOMEventHandler(
        lambda e: on_drop(e, window), True, True
    )

if __name__ == "__main__":
    window = webview.create_window(
        "Drag & drop example",
        html="""
            <html>
                <head>
                    <script>
                        window.addEventListener("pywebviewDrop", (e) => {
                            console.log(e.detail.pywebviewFullPath);
                        })
                    </script>
                </head>
                <body style="height: 100vh;"->
                    <h1>Drag files here</h1>
                </body>
            </html>
        """,
    )
    webview.start(bind, [window], debug=True)