Question

我有一个绝对的文件网址。

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实现这一目标？

Answer 1

只需链接即可。

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

Answer 2

更好的方法是不以编程方式执行此操作：

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

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

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

Answer 3

使用window.open（fileUrl） - 将下载;

Answer 4

这样做，

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

Answer 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();

通过发送文件名和路径作为属性

点击网址下载文件

5 个答案: