将PDFkit制作的PDF文件发送给客户端进行展示答案

【问题标题】：Send PDF file made with PDFkit to the client for display将PDFkit制作的PDF文件发送给客户端进行展示
【发布时间】：2017-11-27 14:43:28
【问题描述】：

我的心智模型有问题，我可能完全错了，如果是这样的话，我深表歉意。

我正在构建一个处理预算产品的全栈应用程序，我拥有的是一个 React 客户端，它向我的服务器发送一个“预算”对象，其中包含发布请求的所有相关信息，它看起来喜欢：

let budget = {
  name: 'John Doe',
  phone: 12345,
  email: 'johndoe@gmail.com'
  cart: [Object with name, quantity, and price of product, etc, another object that represents another product],
  subTotal: 100,
  tax: 12,
  total: 112
}

我将该数据发送到我的 NodeJS/Express 服务器，在该服务器中我有 PDFKit 来帮助我创建 PDF，并且我想将其发送回客户端，以便用户可以下载/打印/查看 PDF 格式的预算，服务器中的代码是这样的

const pdf = require('pdfkit');
const fs = require('fs');

exports.makeBudgetPDF = (req, res) => {

  let myDoc = new pdf;
  myDoc.pipe(res);
  myDoc.font('Times-Roman')
       .fontSize(12)
       .text(`this is a test budget`);
  myDoc.end();
  res.setHeader('access-control-allow-origin', '*');
  res.status(200);
}

这一切都很好，我正在将请求的响应发送回客户端，但我不知道如何从那里显示它，我得到一个数据对象（我正在使用 axios 来处理请求客户端）看起来像这样，我完全不知道如何处理它

Object
data:
"%PDF-1.3↵%����↵5 0 obj↵<<↵/Type /Page↵/Parent 1 0 R↵/MediaBox [0 0 612 792]↵/Contents 3 0 R↵/Resources 4 0 R↵>>↵endobj↵4 0 obj↵<<↵/ProcSet [/PDF /Text /ImageB /ImageC /ImageI]↵/Font <<↵/F2 6 0 R↵>>↵>>↵endobj↵7 0 obj↵<<↵/Producer (PDFKit)↵/Creator (PDFKit)↵/CreationDate (D:20170623192634Z)↵>>↵endobj↵6 0 obj↵<<↵/Type /Font↵/BaseFont /Times-Roman↵/Subtype /Type1↵/Encoding /WinAnsiEncoding↵>>↵endobj↵2 0 obj↵<<↵/Type /Catalog↵/Pages 1 0 R↵>>↵endobj↵1 0 obj↵<<↵/Type /Pages↵/Count 1↵/Kids [5 0 R]↵>>↵endobj↵3 0 obj↵<<↵/Length 200↵/Filter /FlateDecode↵>>↵stream↵x��O9NA�����.OK#$Ȑ:C0G6��?Y�j�@�ڲ�\�g=H>є������=��R(�B�4�S��㫒(��|��P4��OT+��s8*�!�&�f�V
��3\�g�&]`X1+��슯$�pe������bK��jK��n�?����^��m8��8s�q2K�Jv$;JS}O�����'��~.��T�↵endstream↵endobj↵xref↵0 8↵0000000000 65535 f ↵0000000448 00000 n ↵0000000399 00000 n ↵0000000505 00000 n ↵0000000119 00000 n ↵0000000015 00000 n ↵0000000300 00000 n ↵0000000208 00000 n ↵trailer↵<<↵/Size 8↵/Root 2 0 R↵/Info 7 0 R↵>>↵startxref↵777↵%%EOF↵"

headers:
Object

request:
XMLHttpRequest

status:
200

statusText:
"OK"

我一直在研究它，但似乎找不到答案

【问题讨论】：

您解决了这个问题吗？我有同样的问题。直接从节点服务器获取文件给了我 pdf。从 reactjs 调用 restful api 会给我你上次写的乱码。
有点晚了，但我也有同样的问题。你是怎么解决的？

标签： node.js reactjs http express pdfkit

【解决方案1】：

也许是老问题，但我遇到了类似的问题并找到了答案。

首先当你创建新的 pdf 时使用：

const myDoc = pdf();

对我有用的代码如下所示：

  const pdfName = "generated.pdf";
  const generatedPdfPath = path.join("dist", "temp", pdfName); // depending where you want your pdf

  const doc = new pdf();
  res.setHeader("Content-Type", "application/pdf");
  res.setHeader("Content-Disposition", `inline; filename=${pdfName}`);

  doc.pipe(fs.createWriteStream(generatedPdfPath));
  doc.pipe(res);

  doc.text('some text or anything else you want');
  // in my case I was adding multiple images and it also worked fined

  doc.end();

【讨论】：

【解决方案2】：

我不熟悉 PDFKit，但一直在使用 PDFMake。您可能需要在标头中设置响应的内容类型，类似于：

res.writeHead(200, {
  'Content-Type': 'application/pdf',
  'Content-disposition': 'attachment;filename=[your-filename].pdf',
  'Content-Length': response.ContentLength
});

这将强制在用户的浏览器中进行下载。将 [your-filename] 替换为您希望文件命名的任何内容。 response.ContentLength 是来自先前回调的 PDF 缓冲区大小，在我的示例中未显示。将其替换为文档的内容大小。

[edit] 记住，我在管道传输到 res 时遇到了问题。您最终可能会将 PDF 写入缓冲区，然后调用：

res.end(Buffer.from([your pdf buffer]));

【讨论】：