19

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

4

4 回答 4

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

点击显示图片结果

于 2018-02-05T20:41:37.813 回答
13

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

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

  • 有一个支持表格的 PDFKit的分支。这是应该使用的示例。
  • 有pdfmake构建在 PDFKit 之上并支持表格。与 PDFKit 不同，Pdfmake 支持声明式语法。

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

于 2016-12-18T14:48:03.640 回答
1

这对我有用：

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在它周围画线会很简单。

产生看起来像这样的东西 桌子的样子

于 2019-11-07T13:46:33.610 回答
0

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 );
于 2021-09-17T16:25:31.093 回答