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

问题描述

我的代码只下载存在于我后端的文件。我可以看到后端的 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 和 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'
  })
}