使用 React.JS (Axios Get) 从 Node.JS API REST (express) 下载文件

IT技术 节点.js 反应 休息 表达 下载
2021-05-11 05:25:29

我有一个 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 文件.. 所以它是空的..



我已经检查了几个相关的问题,例如使用 Express 从 NodeJS 服务器下载文件

但不幸的是,我还没有找到如何解决我的问题。

1)我在服务器端做错了什么?

2)我与客户端的响应有什么关系?

谢谢

2个回答

您可以使用js-file-downloadmodule。

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 和一个链接元素来下载它。

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");
      }
  )
  
}

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