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?

Solution 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

Solution 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.

Solution 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

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

View more solutions

Comments

[yuvi]

As I told you in your previous question, it will be beneficial if you showed us some effort you did to solve the problem yourself (just saying that you don't know does not equal effort. Google around, look for examples. Have you tried to do something and it failed? if so, what did you try to do? etc.). It's both about learning to cope with problems, but also more people will be inclined to help someone who shows his attempts first, because it means you're genuinely trying to learn\do something, and not expecting others to do your code for you out of laziness (more common than you think)

[Sachin]

@yuvi: I have tried to use doc.table but no such thing is available in pdfkit, also following link github.com/devongovett/pdfkit/issues/29 telling that we can not use it for production use.

[doublesharp]

I had the same issue and ended up using pdfmake, which is based on pdfkit, but has higher level support for things like tables.

[Epirocks]

Worth adding that the PDFKIT has got tables under it's "Coming Soon" section.

[Srinath Kamath]

Looks promising!