如何向客户提供pdf？答案

【问题标题】：How to serve pdf to the client?如何向客户提供pdf？
【发布时间】：2019-07-04 02:12:04
【问题描述】：

onClick of a button 我正在尝试从服务器获取生成的 PDF（通过 Pdfmake 库）文件，尽管我在 chrome 开发控制台的预览和响应部分中获得了非常长的 base64 代码，例如 --

JVBERi0xLjMKJf////8KNyAwIG9iago8PAovVHlwZSAvRXh0R1N0YXRlCi9jYSAxCj4+CmVuZG9iago4IDAgb2JqCjw8Ci9UeXBlIC9FeHRHU3RhdGUKL2NhIDEKL0NBIDEKPj4KZW5kb2JqCjExIDAgKL0luZm8gMTMgMCBSCi9JRCBbPGIzZjEyYjhkYWYwN2Q4ZWZkZjFjYTkzOWE3YTQ2NjZiPiA8YjNmMTJiOGRhZjA3ZDhlZmRmMWNhOTM5YTdhNDY2NmI+XQo+PgpzdGFydHhyZWYKMjA5Nj 。 …………很长……

我希望在新的浏览器窗口选项卡上获得 pdf，在手动输入这个以data:application/pdf;base64, 为前缀的base64 代码之后，它会显示pdf，但我需要它在onClick 发生时立即在新选项卡上弹出...

data:application/pdf;base64,JVBERi0xLjMKJf////8KNyAwIG9iago8PAovVHlwZSAvRXh0R1N0YXRlCi9jYSAxCj4+CmVuZG9iago4IDAgb2JqCjw8Ci9UeXBlIC9FeHRHU3RhdGUKL2NhIDEKL0NBIDEKPj4KZW5kb2JqCjExIDAgb2JqCjw8Ci9UeXBlIC9FeHRHU3RhdGUKL0NBIDEKPj4KZW5kb2JqgKI189+A10wPsfByPuXwnyXtcO17zDJBaRJTFEFLPpHqYmHEniQ7Wjpe/E/iXwbhHf8B6XIZX4gskibxEvuIM8G8E9zIfwk/kt/OfCYXCcuFT4YxqlOp11Tl1sVrSxGlqNa9pftQO1oo

请尽可能简单详细地回答，我不知道流、缓冲区、base64、文件系统一切如何工作以及如何解决，我是开发新手。

客户端 --->

handleOrderInvoice(event) {
const orderid = event.currentTarget.id;
fetch(`/api/payment/order/${orderid}`, {
  method: "GET",
  headers: {
    Accept: "application/pdf",
    Authorization: localStorage.getItem("bearerToken")
  }
})
  .then(response => {

    //HOW to work with pdf response???

  })
  .catch(err => console.log(`Error in fetching this order. -- ${err}`));

服务器端（Express） -->

    router.get(
  "/order/:orderid",
  passport.authenticate("jwt", { session: false }),
  (req, res) => {
        //Create PDF Document
        const pdfDoc = pdfMake.createPdf(documentDefinition);
        pdfDoc.getBase64(data => {
          res.writeHead(200, {
            "Content-Type": "application/pdf",
            "content-Disposition": "inline; filename='invoice.pdf'"
          });
          const doc = Buffer.from(data.toString("utf-8"), "base64");
          res.end(doc);
        });
      })
      .catch(err =>
        console.log(`Error in fetching user order response. -- ${err}`)
      );
  }
);

【问题讨论】：

标签： node.js reactjs express pdf-generation

【解决方案1】：

pdfs，图像通常不存储在 base64 中，因为这些文件的大小可能很大。而是使用文件系统来存储，因为它更便宜（您不必来回转换）

假设您已将 pdf 存储在文件系统上，您可以简单地使用

response.sendFile(url-for-pdf);

您可以使用

打开一个新窗口以在客户端显示 pdf

window.open('_link is here_', '_blank');

【讨论】：

据我所知，.sendFile()是用来发送静态文件给客户端的。如果我不想在任何地方存储 pdf 然后将其作为响应发送怎么办。只想将动态生成的单页（用户特定）pdf从后端发送到客户端作为响应，希望你明白我在尝试什么..
stackoverflow.com/questions/742271/… 这应该会有所帮助