11

Is it possible to draw lines, circles and other shapes with pdfmake? If yes, is there a documentation or are there any samples? I would like to replace jsPDF with pdfmake.

DoK
  • 851
  • 3
  • 15
  • 31

4 Answers4

17

Yes, its possible. pdfmake calls them vectors. See pdfMake Vector examples for more possibilities.

An example for drawing a line followed by a polygon:

{
   canvas: 
   [
       {
           type: 'line',
           x1: 40, y1: 60,
           x2: 260, y2: 60,
           lineWidth: 3
       },
       {
           type: 'polyline',
           lineWidth: 3,
           closePath: true,
           points: [{ x: 10, y: 10}, { x: 35, y: 40 }, { x: 100, y: 40 }, { x: 125, y:10 }]
       }
   ]
}
Arthur Weborg
  • 8,280
  • 5
  • 30
  • 67
Gustavo Cabrelli Nirschl
  • 171
  • 1
  • 3
8

I answered an issue in pdfMake at GitHub like this:

Create a table with layout headeronly you must define an empty body, otherwise the line would not appear:

var dd = {
    content: [
        {
                                  table : {
                                      headerRows : 1,
                                      widths: [200],
                                      body : [
                                              [''],
                                              ['']
                                              ]
                                  },
                                  layout : 'headerLineOnly'
                              }
            ] }

The width defines the length of the line

Beka
  • 343
  • 2
  • 8
  • 2
    The nice thing about this method is that you can specify widths as a percentage, like '100%' or '50%'. I didn't see that you can do that with canvas. – eflat Oct 03 '19 at 18:59
  • The line is bit too thick, how to control it's thickness? – gegobyte Jan 14 '21 at 12:03
3
canvas: [
                {
                    type: 'rect',
                    x: 198,
                    y: -186,
                    w: 198,
                    h: 188,
                    r: 8,
                    lineWidth: 4,
                    lineColor: '#276fb8',

                },

                 ]
bhanu avinash
  • 484
  • 2
  • 16
-1

As far as I know, pdfmake does not provide an drawing API. Despite this, pdfmake provides you some methods to insert images at your pdf.

Best regards!

RandomUser
  • 1,094
  • 1
  • 12
  • 24