node.js - 如何从 NodeJS 服务器下载 React 中的文件? (文件损坏)

标签 node.js reactjs

我希望能够使用 nodejs 将 pdf 文件发送到前端。但是当我这样做时,出现错误,无法打开文件。错误是这样的(错误翻译:加载PDF文档时出错): enter image description here

我认为一切都很好,但仍然没有工作。

这是 nodeJS 代码:

routerTrainer.get("/download-training", verifyJWT, async (req, res) => {

  const { training_id } = req.headers;

  let training = await Training.findOne({
    where: { id: training_id },
  });

  if (training) {
   const path = "/home/gonsa02/Disk/Projects/";
   const dirname = "uploads/trainings/";
   res.download(`${path}${dirname}${training.file_id}`);
  }
});

这是 React 前端代码:

const downloadTraining = async (id) => {
    const fileReader = new FileReader();
    const JWT = new ClassJWT();
    const axiosReq = axios.create();
    await JWT.checkJWT();
    axiosReq
      .get(`${serverPath}/download-training`, {
        headers: {
          training_id: id,
          token: JWT.getToken(),
          responseType: "blob",
        },
      })
      .then((res) => {
        console.log(res);
        fileReader.readAsDataURL(new Blob([res.data]));
      })
      .catch((err) => console.log(err));

    fileReader.addEventListener("loadend", () => {
      const blobString = fileReader.result;
      const link = document.createElement("a");
      link.href = blobString;
      link.setAttribute("download", "file.pdf");
      document.body.appendChild(link);
      link.click();
    });
  };

不要担心所有具有 JWT 的东西,比如 verifyJWT 或 ClassJWT,这是 json 网络 token 的实现,它可以正常工作。

如果有人知道如何修复它,请告诉我。

最佳答案

也许你可以试试这个

fetch("filepath", {
  headers: headers
})
  .then(res => res.blob())
  .then(blob => {
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.setAttribute("download", "file.pdf");
    document.body.appendChild(link);
    link.click();
  })

我不测试它。

关于node.js - 如何从 NodeJS 服务器下载 React 中的文件? (文件损坏),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69098954/

相关文章:

node.js - 如何使用 vanilla Node 发送由 Fiddler 接收的 HTTP 请求?

node.js - 在 Sequelize 和 Epilogue 中创建模型和关联

reactjs - 如何在 React 中实现输入自动制表符(关注 keyup 事件中的下一个输入元素)?

javascript - mapStateToProps 对象未定义

node.js - Cucumber JS 并真正完成了一些事情

mysql - 使用 sequelize 向列添加评论

string - 在 React 中将组件的状态添加到字符串中

javascript - 如何在 Material-UI 中为 ToolTip 标题换行

javascript - React 中至少有一个必需的 prop

javascript - 如何显示从 nodejs 服务器获取的缓冲区数据中的视频