如何在没有 http 服务器的情况下使用 file:// url 从 Chrome 使用文件系统访问 API

Question

我想在我的计算机上打开来自 Chrome 的 html 文件，没有 http 服务器，我希望 HTML 文件中的 JavaScript可以在本地文件系统中读写文件，也可以浏览目录。

如何使用文件系统 API 执行此操作：https://wicg.github.io/file-system-access/ ?

Answer 1

文件系统 API 当前在 Chrome 85 中不可用。现在您可以使用批处理文件启动 html 文件，该文件将定位并启动 Chrome使用正确的命令行选项。

将批处理文件命名为与 html 文件相同的名称，并将以下内容放入批处理文件中：

@echo off

setlocal
set name=%~n0
set here=%~dp0

cd /d %here%
set indexFile=%here%%name%.html
if not exist "%indexFile%" set indexFile=%here%%name%.htm
if not exist "%indexFile%" Echo Could not locate "%name%.htm" or "%name%.html" & pause & goto :eof

get path to msedge.exe
set exe=
FOR /F "tokens=2* skip=2" %%a in ('reg query HKCR\MSEdgeHTM\DefaultIcon /ve') do set exe=%%b
cls
set exe=%exe:~0,-2%
if defined exe goto exeFound

rem get path to chrome.exe
set exe=
FOR /F "tokens=2* skip=2" %%a in ('reg query HKCR\ChromeHTML\DefaultIcon /ve') do set exe=%%b
cls
set exe=%exe:~0,-2%
if defined exe goto exeFound

start "" "%indexFile%"
goto :eof

:exeFound
start "" "%exe%" --enable-experimental-web-platform-features --disable-web-security --no-proxy-server --no-sandbox --allow-file-access-from-files --allow-file-access  --no-default-browser-check --no-first-run --allow-running-insecure-content --enable-local-file-accesses --disable-extensions --user-data-dir="%temp%\%name%" --app="file:///%indexFile%"

在javascript中你可以这样调用：

判断API是否可用

if (typeof showDirectoryPicker === 'undefined')

访问目录或文件

const directoryHandle = await showDirectoryPicker()

const fileHandle = await directoryHandle.getFileHandle(fileName)

const str = await (await fileHandle.getFile()).text();

参见 showOpenFilePicker()、showSaveFilePicker() 和 showDirectoryPicker() https://wicg.github.io/file-system-access/ 了解更多。

更新：

用 Chrome 88 测试过，根本不需要批处理文件了。

更新 2：

如何在针对文件启动 Chrome 或 Edge 时禁用网络安全：基于 url，来自 c#:

private static void LaunchBrowser(string name, string indexFilePath)
{
    var exe = GetBrowserExePath();
    if (string.IsNullOrEmpty(exe))
    {
        Console.WriteLine("Could not locate browser");
        return;
    }

    var userDataDir = Path.Combine(Path.GetTempPath(), name);
    var indexFile = new Uri(indexFilePath).AbsoluteUri;

    var parameters =
        " --disable-web-security" +
        " --no-default-browser-check" +
        " --no-first-run" +
        " --disable-extensions" +
        " --user-data-dir=" + "\"" + userDataDir + "\"" +
        " --app=" + "\"" + indexFile + "\"" +
        "";
    Process.Start(exe, parameters);
}

private static string GetBrowserExePath()
{
    string exe = GetBrowserExePathWithKey("MdSEdgeHTM");
    if (string.IsNullOrEmpty(exe))
    {
        exe = GetBrowserExePathWithKey("ChromeHTML");
    }

    return exe;

    string GetBrowserExePathWithKey(string keyForChromeBaseBrowser)
    {
        var key = Registry.ClassesRoot.OpenSubKey(keyForChromeBaseBrowser);
        if (key != null)
        {
            key = key.OpenSubKey("DefaultIcon");
            if (key != null)
            {
                var v = key.GetValue(string.Empty) as string;
                var y = Regex.Match(v, @"(.*\.exe),");
                if (y.Success)
                {
                    var g = y.Groups;
                    if (g.Count > 1)
                    {
                        return g[1].Value;
                    }
                }
            }
        }

        return string.Empty;
    }
}

如何在没有 http 服务器的情况下使用 file:// url 从 Chrome 使用文件系统访问 API

How do I use the File System Access API from Chrome using file:// url with no http server

filesystems

file

html5-filesystem

判断API是否可用

访问目录或文件

更新：

更新 2：