当<a href="">是本地文件时，正确的设置方法是什么？

Question

当<a href="">是本地文件时，正确的设置方法是什么？

31

我正在尝试链接到本地文件。我已将href设置为：

<a href="file://C:/path/to/file/file.html">Link Anchor</a>

在Firefox浏览器中，当我右键点击并选择“在新标签页中打开链接”时，什么也没有发生。
当我右键点击并选择“复制链接地址”，然后手动打开一个新的标签页并粘贴复制的链接，它可以正常工作。所以我的file://语法是正确的。我也尝试过用3个斜杠file:///，但结果都一样。

我做错了什么？

- sameold

1

我认为问题出在Firefox上。作为一项安全功能，他们防止远程文件访问本地文件。虽然有解决方法，但它们似乎是通过浏览器实现的。可以在这里找到更多信息：http://kb.mozillazine.org/Links_to_local_pages_do_not_work - numaroth

请参见 https://dev59.com/jXM_5IYBdhLWcg3wNwQv。 - Mawg says reinstate Monica

8个回答

13

将文件按层级目录组织，然后只需使用相对路径。

演示：

HTML（index.html）

<a href='inner/file.html'>link</a>

目录结构：

base/
base/index.html
base/inner/file.html
....

- Petar Sabev

我似乎无法这样做，因为数据文件夹和脚本位于不同的位置。我尝试使用 ../../etc，但它无法超越脚本所在站点的主页。虽然你想帮忙，但它也无法一直到达 C:/ +1。 - sameold

即使您没有理想的目录结构，也可以像我在下面的答案中所示使用基本标签。 - Jenna Leaf

在HTML5或CSS中，是否有可能继承<a>标签的内容或目标？我正在链接文件，并希望确保显示的链接与文件名对应。 - Pontis

5

基础标签（base tag）中的 href 值将成为所有相对路径的参考点，因此会覆盖您当前目录路径值。否则，“~”是您网站的根目录。

    <head>
        <base href="~/" />
    </head>

- Jenna Leaf

2

如果你正在运行 IIS 并通过它运行 HTML 页面，则本地文件系统将无法访问，导致出现这种情况。

如果想在本地使链接有效，请直接从文件浏览器而不是 Visual Studio F5 或 IIS 运行调用 HTML 页面，只需点击它以从文件系统打开，并确保你使用的链接如下所示：

<a href="file:///F:/VS_2015_WorkSpace/Projects/xyz/Intro.html">Intro</a>

- Ashraf Sada

1

设置本地文件时，正确的方式是使用a href=“”标签。当代码或文件在线时，这样做不会产生任何问题。

<a href="./your_file_name.html">FAQ</a>

希望能对你有所帮助。

- Dilip Kumar Choudhary

0

这里提供了一种通过客户端和服务器端的努力来下载本地文件的替代方法：

 <a onclick='fileClick(this)' href="file://C:/path/to/file/file.html"/>

Js: function fileClick(a) {

        var linkTag = a.href;
        var substring = "file:///";
        if (linkTag.includes(substring)) {
            var url = '/cnm/document/v/downloadLocalfile?path=' + encodeURIComponent(linkTag);
            fileOpen(url);
        }
        else {
            window.open(linkTag, '_blank');
        }
    }

    function fileOpen(url) {
        $.ajax({
            url: url,
            complete: function (jqxhr, txt_status) {
                console.log("Complete: [ " + txt_status + " ] " + jqxhr);
                if (txt_status == 'success') {
                    window.open(url, '_self');
                }
                else {
                    alert("File not found[404]!");
                }
                // }
            }
        });
    }

服务器端[Java]:

@GetMapping("/v/downloadLocalfile")
  public void downloadLocalfile(@RequestParam String path, HttpServletResponse 
        response) throws IOException, JRException {
      try {
          String nPath = path.replace("file:///", "").trim();
          File file = new File(nPath);
          String fileName = file.getName();
        
        response.setHeader("Content-Disposition", "attachment;filename=" +  
         fileName);
        if (file.exists()) {
            FileInputStream in = new FileInputStream(file);
            response.setStatus(200);
            OutputStream out = response.getOutputStream();
            byte[] buffer = new byte[1024];

            int numBytesRead;
            while ((numBytesRead = in.read(buffer)) > 0) {
                out.write(buffer, 0, numBytesRead);
            }
            // out.flush();
            in.close();
            out.close();
        }
        else {
            response.setStatus(404);
        }
      } catch (Exception ex) {
         logger.error(ex.getLocalizedMessage());
      }
    return;
}

- Mayen

0

../html文件名带有.html扩展名用户可以这样做这将解决您在本地文件重定向到任何页面的问题。

- Priyanka Davle

0

尝试用竖杠|替换冒号:。那应该行了

<a href="file://C|/path/to/file/file.html">Link Anchor</a>

- David Schronce

如果您解释一下为什么应该这样做，对用户可能会很有帮助。我知道我想了解它的工作原理。 - elersong

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

就定义而言，file: URL 会受到系统限制，它们的用处很少。像你示例中的 URL 一样，只有在本地使用时才能正常工作，即链接页面本身位于用户的计算机上。但是，浏览器通常会拒绝在使用 HTTP 协议获取页面的情况下跟随 file: 链接，以便页面自身的 URL 是 http: URL。当你点击这样的链接时，什么也不会发生。这个目的可能是出于安全考虑：防止远程页面访问访客计算机上的文件。（我认为这个特性最初是在 Mozilla 中实现的，然后被复制到其他浏览器中。）

因此，如果你在计算机上使用 HTML 文档，file: URL 应该可以正常工作，尽管在其语法（如何编写路径名和文件名）方面存在系统相关问题。

如果你真的需要在计算机上处理一个 HTML 文档和在 Web 服务器上处理另一个 HTML 文档，使链接正常工作的方法是将本地文件用作主文件，并且如果需要，使用客户端脚本从服务器获取文档。