pdfkit (Expressjs-Nodejs) 中的 HTML 表格答案

【问题标题】：HTML table in pdfkit (Expressjs-Nodejs)pdfkit (Expressjs-Nodejs) 中的 HTML 表格
【发布时间】：2014-06-30 19:35:47
【问题描述】：

我正在使用 pdfkit 生成 PDF 文件，我想将此 PDF 文件发送到浏览器。我的以下代码运行良好，我得到了一份带有文本的 pdf。

实际上以下代码是在 Node.js 中使用 pdfkit 生成 PDF 的示例，但现在我想创建 html 表。

最新代码

var PDFDocument = require("pdfkit");
var fs = require("fs");
doc = new PDFDocument();
doc.pipe(fs.createWriteStream("out.pdf"));
doc.moveTo(300, 75)
    .lineTo(373, 301)
    .lineTo(181, 161)
    .lineTo(419, 161)
    .lineTo(227, 301)
    .fill("red", "even-odd");

var loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in...";

doc.y = 320;
doc.fillColor("black");
doc.text(loremIpsum, {
    paragraphGap: 10,
    indent: 20,
    align: "justify",
    columns: 2
});
doc.pipe(res);
doc.end();

但我不知道如何使用 pdfkit 在 pdf 中生成 HTML 表格？

谁能帮我创建HTML表格PDF？

【问题讨论】：

正如我在上一个问题中告诉你的那样，如果你向我们展示你为自己解决问题所做的一些努力将是有益的（只是说你不知道不等于努力。谷歌周围，查找示例。您是否尝试过做某事但失败了？如果是，您尝试做什么？等等）。这既是关于学习解决问题，也是更多的人会倾向于帮助那些首先展示他的尝试的人，因为这意味着你真的在努力学习\做某事，而不是期望别人为你完成你的代码懒惰（比你想象的更普遍）
@yuvi：我曾尝试使用 doc.table，但 pdfkit 中没有这样的东西，也可以通过链接 github.com/devongovett/pdfkit/issues/29 告诉我们不能将其用于生产用途。
我遇到了同样的问题，最终使用了pdfmake，它基于 pdfkit，但对 tables 之类的东西有更高级别的支持。

标签： javascript node.js express node-pdfkit

【解决方案1】：

function example(){    
var doc = new PDFDocument();

var writeStream = fs.createWriteStream('filename.pdf');
doc.pipe(writeStream);
//line to the middle
doc.lineCap('butt')
  .moveTo(270, 90)
  .lineTo(270, 230)
  .stroke()

row(doc, 90);
row(doc, 110);
row(doc, 130);
row(doc, 150);
row(doc, 170);
row(doc, 190);
row(doc, 210);

textInRowFirst(doc, 'Nombre o razón social', 100);
textInRowFirst(doc, 'RUT', 120);
textInRowFirst(doc, 'Dirección', 140);
textInRowFirst(doc, 'Comuna', 160);
textInRowFirst(doc, 'Ciudad', 180);
textInRowFirst(doc, 'Telefono', 200);
textInRowFirst(doc, 'e-mail', 220);
doc.end();

writeStream.on('finish', function () {
  // do stuff with the PDF file
  return res.status(200).json({
    ok: "ok"
  });

});
}

function textInRowFirst(doc, text, heigth) {
  doc.y = heigth;
  doc.x = 30;
  doc.fillColor('black')
  doc.text(text, {
    paragraphGap: 5,
    indent: 5,
    align: 'justify',
    columns: 1,
  });
  return doc
}


function row(doc, heigth) {
  doc.lineJoin('miter')
    .rect(30, heigth, 500, 20)
    .stroke()
  return doc
}

Click show image result

【讨论】：

看起来很有希望！

【解决方案2】：

嗯，直接使用 PDFKit 并不容易。您必须自己实现表格呈现逻辑。如果你想简单地做到这一点，你只需要意识到表格只是一堆带有文本的矩形。这将使用一次性代码。但它不会很灵活。

如果您不介意稍微偏离 PDFKit，有两种选择：

PDFKit 的fork 支持表格。这是应该使用的example。
pdfmake 建立在 PDFKit 之上并支持表格。与 PDFKit 不同，Pdfmake 支持声明式语法。

看到您提到 HTML，我真的建议您在拥有 HTML 并使用 phantomjs 或 wkhtmltopdf 时将 PDFkit 扔到门外，它们的工作是呈现 HTML 并可选择输出 PDF，这就是您想要的。上次我在寻找能很好处理这个问题的模块时，我找到了phantom-html-to-pdf。

【讨论】：

值得补充的是，PDFKIT 在“即将推出”部分下有表格。

【解决方案3】：

这对我有用：

artikelList.map(artikel => {
  let yPos = doc.y;
  doc
    .fontSize(8)
    .text(artikel.titel, (x = 50), (y = yPos))
    .text(artikel.menge, (x = 200), (y = yPos))
    .text(`${artikel.spOhne.toFixed(2)}€`, (x = 250), (y = yPos))
    .text(`${(artikel.USt / 100).toFixed(2)}%`, (x = 350), (y = yPos))
    .text(
      `${(artikel.spOhne * (1 + artikel.USt / 100)).toFixed(2)}€`,
      (x = 400),
      (y = yPos)
    )
    .text(
      `${(artikel.menge * artikel.spOhne * (1 + artikel.USt / 100)).toFixed(
        2
      )}€`,
      (x = 475),
      (y = yPos),
      { align: 'right' }
    );
});

实际上只是固定 y 位置，然后移动通过 x 位置。我想添加rec 和stroke 后，在它周围画线会很简单。

产生看起来像这样的东西

【讨论】：

【解决方案4】：

pdfkit-table

安装 pdfkit-table https://www.npmjs.com/package/pdfkit-table

      // table
      const table = { 
        title: '',
        headers: [],
        datas: [/* complex data */],
        rows: [/* or simple data */],
      }
      // options
      const options = {}
      // the magic
      doc.table( table, options );

【讨论】：