点击网址下载文件答案

【问题标题】：Download file on clicking url点击网址下载文件
【发布时间】：2018-11-20 13:35:17
【问题描述】：

我有一个绝对文件 url。

let fileUrl="https://xyz.blob.core.windows.net/aggregator/merchant/docs/45.txt?st=2018-06-11T10%3A09%3A43Z&se=2018-06-12T10%3A09%3A43Z&sp=r&sv=2017-04-17&sr=c&sig=ugiw0CuNXr0".

单击按钮时，需要下载此文件。

<button onClick={()=> {}>Download</button>

如何使用 reactjs 实现这一点？

【问题讨论】：

xyz.blob.core.windows.net/aggregator/merchant/docs/…" >下载
你确定你的文件路径是正确的吗？？？看看吧
我故意给错了网址。这只是一个例子。
把你的文件放在你的资产中。并在href中给出你的文件路径。并尝试下载。然后下载
正如我所说，该文件不是本地文件。事实上，我什至不会有文件。我得到的只是文件 url，而不是实际文件。

标签： javascript reactjs file download

【解决方案1】：

只需链接到它。

<a href={fileUrl}>Download</a>

【讨论】：

这会在浏览器中打开文件。我不想那样。我需要下载文件。
然后配置服务器发送正确的Content-Disposition标头
我将 url 作为 json 对象的一部分。例如。 response={name:"abc",age:12,url=xyz.blob.core.windows.net/aggregator/merchant/docs/…"}.

【解决方案2】：

更好的方法是不以编程方式进行：

<a href={fileUrl} download>
  Download
</a>

如果你想在更多浏览器上兼容的黑暗路线，你需要通过 ajax 获取文件，创建一个 blob，从 blob 创建一个 url，创建一个锚元素并分配 blob url，然后触发点击它。

或者正如@Quentin 所说，如果跨域被阻止，那么我更愿意通过您在同一域上的服务器代理文件，并仍然使用下载属性href="/api/fileproxy?url=http://...."。

【讨论】：

危险：此 HTML 无效。 <button> 元素不能出现在链接中
download属性一般不支持跨域请求，且URL为绝对URL。
我没有得到文件。我只从服务器获取文件 url 作为 json 对象的一部分

【解决方案3】：

使用 window.open(fileUrl) - 将下载；

【讨论】：

我不希望它在浏览器中打开。我要下载。
文件格式是什么，我的意思是文件扩展名。 excel 和 docx 将自动下载，但图像和 pdf 将在新窗口中打开。如果您想下载 pdf 和图像，请在服务器端设置正确的内容类型
可以是以下任意一种.pdf,.img,.doc,.txt
类似这样的 response.setHeader("Content-Disposition","attachment; filename=\"" + filename + "\""); response.setContentType("application/zip");
文件 url 是 application/json 响应的一部分。例如：{name:'abc',age:'12',url:"dummyurl.txt"}

【解决方案4】：

这样做，

<a href={fileUrl}><button>Download</button></a>

【讨论】：

【解决方案5】：

好吧，准确地说，您可以按照以下步骤操作（这是在 java 中） 1. 将读取文件的新api写入ByteArrayOutputStream并设置正确的响应类型（文件名和路径将由客户端要求）例如：

ByteArrayOutputStream baos = dao.readFIle(filename, filepath);

    String filename = filename+"."+fileextension;
    response.setHeader("Content-Disposition","attachment; filename=\"" + filename + "\"");
    response.setContentType("application/zip");
        response.getOutputStream().write(baos.toByteArray());
        response.flushBuffer();
        baos.close();

通过将文件名和路径作为属性发送来调用该 api 表单客户端

【讨论】：

我得到的文件 url 是一个绝对文件 url，而不是实际文件本身。另外，我不知道java。如果您能帮助我使用 javascript，我将不胜感激！
Javascript 它只能按照我上面解释的方式工作。即查看 pdf 和图像并下载 docx 和 excel 格式。请您的服务器端开发人员帮助完成上述编码。