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

我的代码只是下载一个存在于我后端的文件。我可以看到后端的pdf文件创建正确且位置正确，但当我将文件发送并下载到前端并打开它时，无论使用哪种浏览器，都会出现错误“无法加载pdf文档”。我想这一定意味着我的blob下载代码有问题，因为我可以在后端打开并查看文件，但我无法找到它。我在网上尝试了很多例子，无论我尝试了什么，我都会遇到同样的问题

server.js（节点后端文件）

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

类PrintDetails扩展了React.Component{
异步打印票证（）{
让file=wait getTicketsPdf（）；
console.log（文件）；
constblob=newblob（[file]，{type:'application/pdf'}）；
const link=document.createElement（'a'）；
link.href=window.URL.createObjectURL（blob）；
link.download='tickets.pdf'；
document.body.appendChild（链接）；
link.click（）；
setTimeout（函数（）{
document.body.removeChild（link）；
}, 100);
}
render（）{
返回(
下载
)
}
异步函数getTicketsPdf（）{
让数据={}；
等待（异步（）=>{
const rawResponse=wait fetch（'/api/v1/getPdf'{
方法：“get”，
标题：{
'responseType'：'blob'，
“内容类型”：“应用程序/json”
},
});
数据=等待响应；
})();
返回数据；
}

以下是我使用和的实现

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'
  })
}

---

这似乎奏效了，谢谢！我不确定到底是什么问题，但这正是我所需要的。再次感谢！@MackenzieQuigley，我很高兴我能提供帮助。问题的发生可能是因为回复和/或内容类型。我也不确定这一点。

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'
  })
}