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

Question

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

Answer 1

这是我使用 axios and file-saver 实现的。

Node.js 后端

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

React 前端

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

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

React.js download pdf file from node backend

blob

download

node.js

reactjs