put checkmark in pdfmake report

Question

i have a project to print out the working report. i got trouble when putting check mark inside pdfmake generated report i follow some instructions from below link :

i already follow all the instructions there but my fontelo nor fontawesome icon show up in my report. while using fontawesome. the icon show square block no the real icon. hope someone can help me figure this out thanks

score 5 · Answer 1 · answered May 17 '17 at 20:37

Maybe you could include some code (a minimal docDefinition, and the printer part).

My code, using fontawesome to display checkboxes/radio icons :

The printer part :

var fonts = {
    Roboto: {
        normal: 'assets/fonts/Roboto-Regular.ttf',
        bold: 'assets/fonts/Roboto-Medium.ttf',
        italics: 'assets/fonts/Roboto-Italic.ttf',
        bolditalics: 'assets/fonts/Roboto-MediumItalic.ttf'
    },
    FontAwesome: {
        normal: 'assets/fonts/fontawesome-webfont.ttf'
    }
  };
// ...
var printer = new PdfPrinter(fonts);

And the docDefinition. You can try using the unicode code :

var dd = {
  content: { text: "\uf046   ", style: 'fontawesome' },
  styles: {
    fontawesome: {
      'font': 'FontAwesome',
      'color': "#656565"
    }
  }
}

score 5 · Answer 2 · answered Mar 28 '20 at 20:55

5

Maybe this ASCII value could work for you? √√√√√√√√

Mac: Option + v
Windows10: Alt + 251

You will get this symbol √ which is similar to the tick checkmark.

http://pdfmake.org/playground
Look at the Extended ASCII Codes section: http://www.asciitable.com/

{
   text: '√',
   absolutePosition: { x: 21, y: 293 }
}

Happy Coding! :)

answered Mar 28 '20 at 20:55

Mr. Dang

535
8
14

This is what worked for me without any difficulties, thanks for this check-mark √ – Ala Douagi Mar 08 '22 at 20:57

score 3 · Answer 3 · answered Mar 23 '20 at 06:57

you can use canvas to draw the square for checkmark as below

canvas: [
            {
                type: 'polyline',
                lineWidth: 1,
                closePath: true,
                points: [{ x: 0, y: 0}, { x: 8, y: 0 }, { x: 8, y: 8 }, { x: 0, y:8 }]
            }
        ]

and then use it with column to make it look like checkbox

score 0 · Answer 4 · answered Jun 07 '22 at 01:52

0

You could also use a image next to a text like I did here.

https://stackblitz.com/edit/angular-pdfmake-example-3f14km?file=src%2Fapp%2Fapp.component.ts

answered Jun 07 '22 at 01:52

J.C

632
1
10
41

put checkmark in pdfmake report

4 Answers4