React.js 从节点后端下载pdf文件

2024-03-01

我的代码只下载后端中存在的文件。我可以看到后端的 pdf 已正确创建并位于正确的位置,但是当我将文件发送并下载到前端并打开它时,无论我使用哪种浏览器,都会收到错误“无法加载 pdf 文档”。我认为这一定意味着我的 blob 下载代码有问题,因为我可以打开并查看后端的文件,但我无法弄清楚。我尝试过遵循网上的许多示例,但无论我尝试过什么,我都会遇到同样的问题。

server.js(节点后端文件)

app.get('/api/v1/getPdf', function(req, res) {
  let resolve = require('path').resolve
  res.sendFile(resolve('./tickets/tickets.pdf'));
});

PrintDetails.js(用于下载pdf的React js代码)-注意:我只包含相关部分

class PrintDetails extends React.Component {

async printTickets() {
      let file = await getTicketsPdf();
      console.log(file);
      const blob = new Blob([file], {type: 'application/pdf'});
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = 'tickets.pdf';
      document.body.appendChild(link);
      link.click();

      setTimeout(function() {
        document.body.removeChild(link);
    }, 100);
  }

render() {
    return (
        <div>
            <button className="download-button-icon" onClick={this.printTickets}>Download</button>
        </div>
    )
}

  async function getTicketsPdf() {
    let data = {};
    await (async () => {
      const rawResponse = await fetch('/api/v1/getPdf', {
        method: 'get',
        headers: {
          'responseType': 'blob',
          'Content-Type': 'application/json'
        },
      });
      data = await rawResponse;
    })();
  
    return data;
  }

这是我的实现使用axios https://www.npmjs.com/package/axios and 文件保护程序 https://www.npmjs.com/package/file-saver#import-saveas-from-file-saver.

Node.js 后端

app.get('/api/v1/getPdf', function(req, res) {
  res.download('./tickets/tickets.pdf');
});

反应前端

import { saveAs } from 'file-saver'
.
.
.
async function printTickets() {
  const { data } = await getTicketsPdf()
  const blob = new Blob([data], { type: 'application/pdf' })
  saveAs(blob, "tickets.pdf")
}

async function getTicketsPdf() {
  return axios.get('/api/v1/getPdf', {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    responseType: 'arraybuffer'
  })
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React.js 从节点后端下载pdf文件 的相关文章

随机推荐

  • 页面加载时的简洁过渡和动画

    我目前正在使用 Svelte 和 Sapper 开发一个网站 我正在使用 Svelte 过渡来为某些页面元素添加动画效果 每当我更改为新的页面路由时 过渡动画都会正确显示 但是当我第一次加载页面时 它们没有动画 Svelte 如何处理页面加
  • Visual Studio 2010 中的 Boost,IntelliSense 错误

    我想看看你能否给我指路 我碰巧编译并引用了 boost 库 以便将它们与 Visual Studio 2010 一起使用 在构建我的测试项目时 我收到这两个 IntelliSense 错误 1 IntelliSense error dire
  • C# asp.net 调用 javascript

    我在 asp content 中有一个 div
  • 在Matlab中过滤包含NaN的图像?

    我有一个二维数组 doubles 代表一些数据 它有一堆NaNs在里面 数据的等值线图如下所示 所有的空白都是NaNs 灰色菱形可供参考 填充轮廓显示我的数据的形状 当我用过滤数据时imfilt the NaNs大量地研究数据 所以我们最终
  • 可重用的内容视图 .NET MAUI

    简而言之 我有一个内容视图 例如
  • 关键字“FOR”附近的语法不正确

    我已经写了下面提到的查询 DECLARE cols AS NVARCHAR MAX query AS NVARCHAR MAX select cols STUFF SELECT distinct QUOTENAME Name from db
  • 在android studio中删除AVD后如何释放空间?

    我想在android studio的AVD管理器中删除AVD 在删除它之前 它需要 4 GB 的存储空间 当我删除它时 我不会获得任何可用存储空间 删除模拟器后如何恢复空间 删除位于此目录中的模拟器的临时文件临时文件夹C Users use
  • 修复了 5 个流体 DIV 旁边的 DIV

    我需要一个相当复杂的布局 我已经尝试了几个小时来解决这个问题 但仍然没有运气 我需要 5 个流体 DIV 旁边有一个固定 div 所有流体 DIV 都需要具有不同的百分比 但所有 6 个 DIV 组合 1 个固定 5 个流体 必须等于父 D
  • 需要帮助创建架构以将 CSV 加载到 BigQuery 中

    我正在尝试从 Google Cloud Storage 将一些 CSV 文件加载到 BigQuery 中 并努力解决架构生成问题 有一个自动生成选项 但记录很少 问题是 如果我选择让 BigQuery 生成架构 它会很好地猜测数据类型 但有
  • 如何在react-native中保留在后台杀死的android应用程序的状态

    当 Android 应用程序被发送到后台时 它可以保留其实例状态 以防由于内存不足而被杀死 请参阅活动 onSaveInstanceState https developer android com reference android ap
  • 使用 AngularJS 获取图像请求

    我将要在 AngularJS 控制器中以 HTML 形式呈现的图像的源字符串存储在 AngularJS 控制器中 但是在初始化 Angular 控制器之前它会生成 404 这是 HTML div img src imageSource di
  • 实体框架和继承:NotSupportedException

    我越来越 System NotSupportedException 全部 实体集中的对象 Entities Message 必须具有唯一性 主键 然而 一个实例 输入 Model Message 和一个实例 Model Comment 类型
  • JQGrid - 我们如何制作自定义行详细信息

    有人给了我一些示例代码来使我的网格像这样 我在文档中读到 jqgrid 仅支持子网格 喜欢层次结构中的此页面http trirand net demoaspnetmvc aspx http trirand net demoaspnetmvc
  • 测试 getJSONArray 是否为 null

    我的代码提取 JSONObject 的结果 但是 有时 i 值不从 1 开始 并且出现如下错误 org json JSONException No value for 1 我的代码 JSONObject obj new JSONObject
  • 在哪里可以获取更多 Android 权限列表? (以外 ...)

    我正在尝试获取有效的 Android 权限列表 我知道 官方 的http developer android com reference android Manifest permission html http developer and
  • Eclipse 在哪里存储有关哪些文件是“派生”的信息?

    当您更改 Eclipse 项目的类路径时 classpath文件发生更改 因此如果您将项目发送给其他人 包括 classpath文件 它们具有相同的类路径 但是 当您将资源更改为 派生 时 两者都没有变化 project or classp
  • 如果数据库为空,则处理 ActiveRecord 错误

    我正在开发 Rails 4 应用程序 并且我有以下控制器代码 def index issue Issue find 1 sections issue sections articles issue articles end 如果数据库为空并
  • 我应该使用什么图来表示模块中功能之间的交互?

    我需要使用 UML 或 SysML 符号创建图表 我有由函数组成的模块 有些函数仅在模块 内部 使用 其他函数则由其他模块使用 Example MODULE 1有两个功能 func1 and func2 func2 uses func1 i
  • 删除javascript中下拉框的所有选项

    如何在javascript中动态删除下拉框的所有选项 document getElementById id options length 0 or document getElementById id innerHTML
  • React.js 从节点后端下载pdf文件

    我的代码只下载后端中存在的文件 我可以看到后端的 pdf 已正确创建并位于正确的位置 但是当我将文件发送并下载到前端并打开它时 无论我使用哪种浏览器 都会收到错误 无法加载 pdf 文档 我认为这一定意味着我的 blob 下载代码有问题 因