React中如何从NodeJS服务器下载文件? (文件损坏)

2024-03-31

I would like to be able to send pdf files with nodejs to the frontend. But when I do this, I get an error and I can't open the file. This is the error (translation of error: an error occurred when loading the PDF document): 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 Web 令牌的实现,它可以正常工作。

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


也许你可以试试这个

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

我不测试它。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React中如何从NodeJS服务器下载文件? (文件损坏) 的相关文章

  • 如何禁用 Chrome 自动完成功能?

    我们想要禁用自动完成在 Chrome 浏览器中的 React JavaScript 应用程序中 我们尝试了互联网上提供的一系列解决方案 但没有任何效果 autoComplete off不可靠 其他方法也不可靠 目前这对我们来说非常重要 所以
  • React PropTypes 与 Flow

    PropTypes 和 Flow 涵盖相似的内容 但使用不同的方法 PropTypes 可以在运行时向您发出警告 这有助于快速找到来自服务器等的格式错误的响应 但是 Flow 似乎是未来 并且具有泛型等概念 是一个非常灵活的解决方案 Nuc
  • 在node.js中加载并执行外部文件

    从另一个节点js文件运行一个节点js文件是否容易 可能 例如 我有两个文件 test1 js 和 test2 js 我想从 test2 js 执行 test1 js 文件 我认为完成你想做的事情的更好方法是按照我的其他答案建议的去做 但是要
  • 使用 React.lazy 时未捕获未定义的错误

    我正在尝试实施基于路由的代码分割 https reactjs org docs code splitting html route based code splitting正如 React 文档中提到的 这是添加延迟实现之前我的应用程序 这
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • 流星内存不足

    我正在使用流星来制作报废引擎 我必须执行一个 HTTP GET 请求 这会向我发送一个 xml 但这个 xml 大于 400 ko 我得到一个异常 内存不足 result Meteor http get http SomeUrl com 致
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • Nodejs mysql 获取正确的时间戳格式

    我在用着mysqljs https github com mysqljs mysql得到结果后sql我变得不同TimeStamp格式如下 created at Sat Jul 16 2016 23 52 54 GMT 0430 IRDT 但
  • 在node.js中生成密码重置令牌

    如何在 node js 中生成可在 url 中使用的密码重置令牌 我只需要生成令牌的方法 user reset password token user reset password expire expire date 编辑 这是解决方案
  • 如何在 React 组件测试中使用 data-testid 属性?

    我正在对一个简单的反应组件进行组件测试 我想渲染该组件 然后对其进行一些测试 问题是cy get 似乎没有找到基于的组件data testid属性 我用一个简单的方法测试了它div和div能找到就好了 我在检查时也注意到DOM在 cypre
  • 部署的 Firebase 函数无法对外部 API 执行 HTTP GET? [复制]

    这个问题在这里已经有答案了 我正在尝试创建我的第一个 Google Home Action 其功能与我的 Amazon Alexa Skill 相同 此操作的工作方式是 您执行一个意图 然后调用我的代码中的一个函数 调用该函数时 它会向外部
  • React Context 的范围是什么?

    我不清楚在哪里Context可以在 React 应用程序中创建 我可以在组件树中的任何位置创建上下文吗 如果可以 该上下文的范围是否仅限于创建它的子级 或者 Context 本质上是全局的 我可以在文档中的哪里找到这个 案例 我在页面上多次
  • Phonegap使用命令行工具添加插件

    我是phonegap的新手 我按照phonegap官方网站中定义的步骤使用命令行工具创建项目 nodejs 我成功创建项目并添加平台 但是 当我尝试添加插件时出现以下错误 命令 cordova plugin add https git wi
  • 将 firestore 中的数据分配给变量

    我尝试使用 get doc 函数将 firestore 数据库中的变量分配给它们所尊重的值 我注意到它不会分配或更新这些值 我尝试使用异步和等待 但似乎无法使其工作 getFromDatabase nameOfCollection name
  • node.js 安装向导提前结束

    我无法安装 node js 0 8 9 我是通过安装向导完成的 每次安装结束时我都会收到消息 Node js 安装向导提前结束 会是什么呢 谢谢 这可能会对将来的某人有所帮助 我从安装程序中收到类似的消息 发现我可以转到命令提示符并使用命令
  • Node + Express 会话过期?

    我有一个 Express 应用程序 并且有一个登录表单 我需要持续 1 个月的会话 我是否将 maxAge 设置为一个月 以毫秒为单位 我让两台计算机保持打开状态并登录了 24 小时 当我回来时 两台计算机都已注销 我该如何解决这个问题 实
  • React - 检查元素在 DOM 中是否可见

    我正在构建一个表单 用户需要回答一系列问题 单选按钮 然后才能进入下一个屏幕 对于字段验证 我使用 yup npm 包 和 redux 作为状态管理 对于一种特定场景 组合 会显示一个新屏幕 div 要求用户进行确认 复选框 然后用户才能继
  • React-redux useDispatch() 未捕获类型错误

    我正在尝试创建一个简单的组件来使用 React Redux 钩子分派操作useDispatch 我收到一个错误 我已将组件修剪到发生错误的位置 当调用 useDispatch 函数时会发生这种情况 import useDispatch fr
  • 由于缺少会话而在 Next.js 中使用 Next-Auth 进行重定向时,如何显示 Toast 通知? [复制]

    这个问题在这里已经有答案了 例如 假设我有一个名为internal tsx 的页面 其中包含 export const getServerSideProps GetServerSideProps async ctx gt const ses
  • 尝试将 Firebase 版本回滚到 2.X

    我最近更新到了新的 Firebase 3 但不幸的是 据我所知 它目前不支持 Geofire 查询 这对我的应用程序很重要 我已经将应用程序中的其他所有内容都转为使用 Firebase 2 但是当我尝试时要将我的应用程序部署到 fireba

随机推荐