使用React.JS从Node.JS API REST快速下载文件Axios Get

如何解决使用React.JS从Node.JS API REST快速下载文件Axios Get

我有一个React JS应用程序，该应用程序作为后端具有由Node JS制成的API REST。

当前，我的目标是能够下载服务器上的文件。 正确的行为应该是用户单击“下载文件”后，应该收到文件（使用浏览器下载）。

在服务器端上，我有类似的东西（很明显，我将通过删除JWT中间件，数据库查询等来简化它）。

const express = require('express');
const router = express.Router();
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();
app.use(cors({ origin: "http://localhost:3000" }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

router.get('/download',(req,res,next) => {
  res.download("\\\\folder\\subfolder\\myfile.txt");
});

app.use('/api',router);
const PORT = 3001;
app.listen(PORT,function() {
    console.log("Server is running on port "+PORT);
});

然后，正如我所说的，我有一个React JS应用程序作为前端：

apihelperdownload () {
  return axios.get(API_URL + "download").then(function (response) {
      return response;
  })
}

.............

function downloadFile() {
  apihelperdownload().then(
      (res) => {
          // Should I do something here with response?
      },(error) => {
          
      }
  )
  
}


<button className="download" onClick={() => downloadFile()}>
  Download File
</button>

我的服务器上有两个文件，一个TXT和一个JPG。 两者都具有正确的路径（我没有收到任何“找不到文件/路径”错误），并且在两种情况下都收到“ 200状态确定” ...但是我无法下载文件。

也：

• 在JPG情况下，在“网络”选项卡的“预览”子选项卡上，我可以看到图像（因此浏览器正在接收图像）。

响应如下：

（忽略参数和不同的url，只是这里没有简化）

-在TXT情况下，在“网络”选项卡的预览子选项卡上，我只能看到一个白页。

响应如下：

如您所见，在第二种情况（.txt文件）中，数据为“空”（“”）
数据是正确的文本。.我没有保存txt文件。.所以它是空的..

我已经检查了类似Download a file from NodeJS Server using Express

的几个相关问题

但是不幸的是，我还没有找到解决问题的方法。

1）我在服务器端做错了什么？

2）我该如何处理客户端的响应？

谢谢

解决方法

您可以使用js-file-download模块。

const FileDownload = require('js-file-download');

Axios.get(API_URL + "download")
   .then((response) => {
        FileDownload(response.data,'file.txt');
    });

检查此响应以了解更多信息：https://stackoverflow.com/a/41940307/6512445

,

我已经找到了如何在没有第三方库的情况下以一种“简便的方式”解决该问题。

首先，我已将请求更改为POST（因为我刚刚做过GET，因为我认为这是唯一的方法）。

然后，在Axios请求上，我们必须将responseType表示为blob：

function apihelperdownload () {
    return axios.post(API_URL + "download",{ key: 'value',headers: authHeader(),responseType: 'blob' }).then(function (response) {
        return response;
    })
}

然后，当我们收到响应时，我们必须创建一个URL对象作为Blob，并创建一个link元素来下载它。

function downloadFile(filename) {
  apihelperdownload().then(
      (res) => {
          const url = window.URL.createObjectURL(new Blob([res.data]));
          const link = document.createElement('a');
          link.href = url;
          if (typeof window.navigator.msSaveBlob === 'function') {
              window.navigator.msSaveBlob(
                  res.data,filename
              );
          } else {
              link.setAttribute('download',filename);
              document.body.appendChild(link);
              link.click();
          }
      },(error) => {
          alert("Something went wrong");
      }
  )
  
}

有了这个，我们可以很容易地下载几乎所有类型的文件。