HTML table in pdfkit (Expressjs-Nodejs)

Question

I am using pdfkit to generate PDF file and I want to send this PDF file to browser. My following code is working fine and I am getting one pdf with text.

Actually following code is sample to generate PDF using pdfkit in Node.js but now I want to create html table.

Latest Code

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

But I don't have any idea how to generate HTML table in pdf using pdfkit?

Can any one help me to create HTML table PDF?

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
}

Click show image result

Answer 2

Well there's no easy to do it directly with PDFKit. You have to implement the table rendering logic yourself. If you wanna do it simply, you just have to realize that tables are just a bunch of rectangles with text into them. This will work with a one-off code. It won't be flexible though.

If you don't mind deviating from PDFKit a little bit, there's a couple of options:

• There's a fork of PDFKit which has tables support. Here's an example of it should be used.
• There's pdfmake which is built on top of PDFKit and supports tables. Pdfmake supports a declarative syntax unlike PDFKit.

And seeing you mention HTML, I would really suggest throw PDFkit out of the door when you have HTML and use phantomjs or wkhtmltopdf, which their job is to render HTML and optionally output PDF and that's what you want. Last time I was looking for a module that handles this well, I found phantom-html-to-pdf.

Answer 3

this worked for me:

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

literally just fixing the y-position and then moving through the x-positions. I guess with adding rec and stroke it would be pretty straight forward to draw the lines around it.

Produces something that looks like this

Answer 4

pdfkit-table

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