Question

在我的Reactjs应用程序中，我使用了定位标记来下载一个txt文件，如下所示。

<a href="http://textfiles.com/......./sample.txt" download>download</a>

我在其中添加了 download 属性，以强制其下载，而不是在浏览器标签中将其打开。

但是它仍在同一选项卡中打开而不是下载。谁能帮我解决这个问题。

Answer 1

查看您的示例似乎您使用的不是相同的来源，这可能会导致问题。

如果您要下载起源相同的文件，那么我建议您使用相对URL而不是绝对URL。

示例：

<a href="/public/sample.txt" download>download</a>

请查看docs中的注释：

属性：下载

注释：


此属性仅适用于same-origin URLs。

尽管HTTP URL的来源必须相同，blob: URLs和   允许使用data: URLs，以便JavaScript生成的内容，例如   作为在图像编辑器Web应用程序中创建的图片，可以下载。

如果HTTP标头Content-Disposition：给出了不同的文件名   比此属性，HTTP标头对此具有更高的优先级   属性。

如果Content-Disposition：设置为内联，则Firefox会优先处理   Chrome优先处理内容处置，例如文件名大小写   下载属性。

Answer 2

尝试这样

import File from 'http://textfiles.com/......./sample.txt'; //Or the path could be any relative path to the local file.

//Other code
render() {
    return(
        //Code
        <a href={File} download>download</a>
    )
}

但是，要像这样使用，您应该确信可以毫无问题地获取文件。最好下载文件并从您自己的目录访问它，而不是从其他服务器调用。

具有下载属性的锚标记将打开文件而不是下载

2 个答案: