如何在react Js中从服务器位置下载文件

Question

在下面的onclick事件中，我点击API获取文件路径，然后将该文件路径传递给download方法----

onClick={event => 
                    { event.preventDefault();this.handleDownloadDoc('downloadAPI')}}> 

下载方法为：-

handleDownloadDoc = (function (fileName) {    
    var a = window.createElement("a"); 
    window.body.appendChild(a);
    a.style = "display: none";
    return function (fileName) {
        var json = JSON.stringify(fileName),
            blob = new Blob([json], {type: "text/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

上面的代码我得到错误，因为不创建元素。请帮忙解决这个问题。

Answer 1

>

您不需要在渲染方法内创建箭头函数。

下面的工作代码和codesandbox链接：-

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  handleDownloadDoc = fileName => e => {
    // Downloads the file
    const link = document.createElement("a");
    link.download = `${fileName}.txt`;
    const blob = new Blob(["Hello, world!"], { type: "text/plain" });
    link.href = URL.createObjectURL(blob);
    link.click();
    URL.revokeObjectURL(link.href);

    // Opens in new window
    // const blob = new Blob(["Hello, world!"], { type: "text/plain" });
    // const fileURL = URL.createObjectURL(blob);
    // window.open(fileURL);
  };
  render() {
    return (
      <div className="App">
        <button onClick={this.handleDownloadDoc("downloadApi")}>
          Download
        </button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

希望有帮助！！！

Answer 2

以下是从服务器下载文件的示例：-

import React from 'react';
import './download.css';

class DownloadFile extends React.Component {

    constructor(props) {
        super(props);
    }

    downloadEmployeeData = () => {
        fetch('http://localhost:8080/employees/download')
            .then(response => {
                response.blob().then(blob => {
                    let url = window.URL.createObjectURL(blob);
                    let a = document.createElement('a');
                    a.href = url;
                    a.download = 'employees.json';
                    a.click();
                });
                //window.location.href = response.url;
        });
    }

    render() {
        return (
            <div id="container">
                <h1>Download File using React App</h1>
                <h3>Download Employee Data using Button</h3>
                <button onClick={this.downloadEmployeeData}>Download</button>
                <p/>
            </div>
        )
    }

}

export default DownloadFile;

有关更多参考信息，请浏览此链接