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

Question

在我的Reactjs应用程序中，我使用锚标记下载如下所示的txt文件。

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

在那里我添加了download属性以强制它下载而不是在浏览器选项卡中打开它。

但它仍然在同一个标​​签中打开而不是下载。任何人都可以帮我解决这个问题。

Answer 1

看看你的例子，你似乎没有使用相同的来源，这可能会导致问题。

如果您尝试下载同一来源的文件，我建议您使用相对网址而不是绝对网址。

例：

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

请查看docs的说明：

属性：下载

笔记：

• 此属性仅适用于same-origin URLs。
• 虽然HTTP（s）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>
    )
}

但是为了像这样使用，你应该确信你将获得没有任何问题的文件。最好下载文件并从您自己的目录访问它，而不是从另一台服务器调用。