Res.download（）使用html表单提交而不是Axios帖子调用

小编典典

Res.download（）使用html表单提交而不是Axios帖子调用

reactjs

我正在编写一个小型应用程序，该应用程序将来自React应用程序的信息提交到Express服务器的“ / download”
API，然后在其中将新文件写入本地文件系统，并使用Express res.download在客户端下载新创建的文件。
（）在fs.writeFile（）回调中。

我一直在使用常规的html表单提交来发布数据，但是由于复杂性的增加，我已经使用Axios进行了切换，并且它不再起作用。

奇怪的是，只有客户端上的下载似乎已停止工作。写入文件就可以了，所有控制台日志都相同（下面的“文件已下载！”日志）。当我切换回表单提交时，它继续工作，因此唯一的更改是使用Axios发送发帖请求。据我所知，一旦数据到达那里，两者之间就应该没有任何区别，但是我希望有人比我对此有更深入的了解。

除了在表单和Axios发布请求之间进行测试之外，我还尝试将Axios请求的内容类型从“ application / json”更改为“ x-www-
form-urlencoded”，以为将内容类型匹配为表单正在发送可能是答案

以下是相关应用程序的相关代码段：

server.js（Node JS）

app.post('/download', (req, res) => {
  console.log("Requst data");
  console.log(req.body.html);


  fs.writeFile("./dist/test.txt", res.body.test,
    (err) => {
      if(err) {
        return console.log(err);
      } else{
        console.log("The file was saved!");
      }

      let file = __dirname + '/text.txt';
      /*This is the issue, the file is not downloading client side for the Axios iteration below*/
      res.download(file,(err)=>{
        if(err){
          console.log(err);
        } else {
          console.log(file);
          /*This logs for both View.js iterations below*/
          console.log("File downloaded!");
        }
      });
    });
})

App.js（反应）

handleSubmit(e){
    e.preventDefault();

    axios.post(`/download`, {test: "test"})
      .then(res => {
        console.log("REQUEST SENT");
      })
      .catch((error) => {
        console.log(error);
      });
}

render(){
      return(
        <div>
          <View handleSubmit={this.handleSubmit} />
        </div>
      )
}

View.js（反应）

这有效：

render(){
      return(
        <form action="/download" method="post">
            <input type="submit">
        </form>
      )
}

这不会在客户端启动下载，但是可以正常工作：

render(){
      return(
        <form onSubmit={this.props.handleSubmit}>
            <input type="submit">
        </form>
      )
}

我没有收到任何错误，除了客户端上的下载以外，其他所有内容似乎都正常运行。

预期结果是使用Axios在客户端下载了文件，但事实并非如此。

更新：颠簸，对此没有任何吸引力

阅读 313

2020-07-22

共1个答案

小编典典

实际上，您可以通过一些Blob操作在Ajax POST请求中下载文件。下面列出了示例代码，并附有注释说明：

handleSubmit(e){
  var req = new XMLHttpRequest();
  req.open('POST', '/download', true); // Open an async AJAX request.
  req.setRequestHeader('Content-Type', 'application/json'); // Send JSON due to the {test: "test"} in question
  req.responseType = 'blob'; // Define the expected data as blob
  req.onreadystatechange = function () {
    if (req.readyState === 4) {
      if (req.status === 200) { // When data is received successfully
        var data = req.response;
        var defaultFilename = 'default.pdf';
        // Or, you can get filename sent from backend through req.getResponseHeader('Content-Disposition')
        if (typeof window.navigator.msSaveBlob === 'function') {
          // If it is IE that support download blob directly.
          window.navigator.msSaveBlob(data, defaultFilename);
        } else {
          var blob = data;
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = defaultFilename;

          document.body.appendChild(link);

          link.click(); // create an <a> element and simulate the click operation.
        }
      }
    }
  };
  req.send(JSON.stringify({test: 'test'}));
}

对于后端，没有什么特别的，只是一个简单的res.download声明：

app.post('/download', function(req, res) {
  res.download('./example.pdf');
});

对于axios，前端代码如下所示：

axios.post(`/download`, {test: "test"}, {responseType: 'blob'})
  .then(function(res) {
        ...
        var data = new Blob([res.data]);
        if (typeof window.navigator.msSaveBlob === 'function') {
          // If it is IE that support download blob directly.
          window.navigator.msSaveBlob(data, defaultFilename);
        } else {
          var blob = data;
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = defaultFilename;

          document.body.appendChild(link);

          link.click(); // create an <a> element and simulate the click operation.
        }
  })
  .catch((error) => {
    console.log(error);
  });

2020-07-22