pdfkit（Expressjs-Nodejs）中的HTML表格

Question

我正在使用 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吗？

- Sachin

---

如我在您之前所回答的问题中所述，如果您能展示出您自己尝试解决问题的努力，那将是有益的（仅仅说不知道并不等同于努力。请在谷歌上搜索、寻找例子。您是否尝试过做某事但失败了？如果是，您尝试了什么？等等）。这不仅是学会应对问题，而且还因为更多的人倾向于帮助那些首先展示他们尝试的人，因为这意味着您真正在努力学习或做某事，而不是出于懒惰期望别人替您编写代码（这比你想象中更常见）。 - yuvi

@yuvi：我尝试使用doc.table，但在pdfkit中没有这样的东西，而且以下链接https://github.com/devongovett/pdfkit/issues/29告诉我们不能将其用于生产用途。 - Sachin

我曾经遇到过同样的问题，最终使用了pdfmake，它基于pdfkit，但对表格等方面提供了更高级别的支持。 - doublesharp

Answer 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
}

点击查看图片结果

- Sebastian Medina

---

看起来很有前途！ - Srinath Kamath

Answer 2

使用PDFKit无法直接轻松地完成。您必须自己实现表格呈现逻辑。如果只需简单实现，您只需要意识到表格只是带有文本的一堆矩形即可。这将在一次性代码中起作用。但这种方法不够灵活。

如果您不介意稍微偏离PDFKit的话，有几个选择：

• PDFKit的分支支持表格。这里是如何使用的示例。
• pdfmake是基于PDFKit构建的，支持表格。Pdfmake支持声明性语法，而不像PDFKit。

既然您提到了HTML，我强烈建议在拥有HTML时将PDFKit放弃，并使用phantomjs或wkhtmltopdf，它们的工作是呈现HTML并可选输出PDF，这正是您想要的。上次我正在寻找一个处理这个问题的模块时，我找到了phantom-html-to-pdf。

- Farid Nouri Neshat

---

值得一提的是，PDFKIT在其“即将推出”部分中有表格。 - Epirocks

Answer 3

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 );

- Natan Cabral

Answer 4

这对我有用：

这个方法适用于我：

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 就可以很容易地在其周围绘制线条。

会产生类似这样的效果

- BenWhite