PDFKit：如何在浏览器中显示生成的 PDF？答案

【问题标题】：PDFKit: How to display generated PDF in browser?PDFKit：如何在浏览器中显示生成的 PDF？
【发布时间】：2021-10-04 11:51:32
【问题描述】：

这里是新手。如何使用 React 在另一个选项卡中显示由 PDFKit 生成的 pdf？我尝试按照他们文档上的说明进行操作，但文件正在本地保存——这不是我想要实现的。这是我在网上找到的代码，以及前端收到的响应。

routes.js

router.route("/generate-pdf")
  .get(checkIfAuthenticated, generatePDF);

api.js

  static async generatePDF(req, res) {
    const doc = new PDFDocument({bufferPages: true});

    let buffers = [];
    doc.on('data', buffers.push.bind(buffers));
    doc.on('end', () => {
        let pdfData = Buffer.concat(buffers);
        res.writeHead(200, {
        'Content-Length': Buffer.byteLength(pdfData),
        'Content-Type': 'application/pdf',
        'Content-disposition': 'attachment;filename=test.pdf',})
        .end(pdfData);
    
    });
    
    doc.font('Times-Roman')
         .fontSize(22)
         .text("TEST PDF FILE");
    doc.end();
  }

回应：

API 调用 console.logs 很好，但我希望在另一个选项卡中打开文件。我对如何实现这样的功能感到困惑。

非常感谢任何线索/提示/建议。提前致谢！

【问题讨论】：

尝试删除标题 'Content-disposition': 'attachment;filename=test.pdf' 。它告诉浏览器执行下载而不是显示文件。

标签： node.js reactjs express pdfkit node-pdfkit

【解决方案1】：

您可以在反应中使用嵌入标签，并将响应中的数据作为嵌入标签资源

<embed src={`data:application/pdf;base64,${response.data}`}/>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。