How I change font-family in PDF Export

Romuald

Hello,

I would like changing the font family in my file export PDF. (Roboto in Arial)

I execute the steps for create the file "vfs_fonts.js" : https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side

1 - I created the file "vfs_fonts.js"

2 - Copy the files font (*.ttf) in the path "vfs_font.js"

3 - I declared in my file "footer.php" :

<script type="text/javascript" src="./pdfmake-0.1.37/pdfmake.min.js"></script>   
<script type="text/javascript" src="./pdfmake-0.1.37/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>   
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>   
<script type="text/javascript" src="./js/script.js"></script>   

4 - I add in my file "script.js" :

pdfMake.fonts = {
        Arial: {
                normal: 'arial.ttf',
                bold: 'arialbd.ttf',
                italics: 'ariali.ttf',
                bolditalics: 'arialbi.ttf'
        }
};

$(document).ready(function() {                                                                                         
oTable = $('#tableau').DataTable( { 
     dom: 'Bfrtip',
        "buttons": [
            {extend: 'copy',text: 'Copier',},
            {extend: 'csv',text: 'Export CSV'},
            {extend: 'excel',text: 'Export Excel'},
            {extend: 'pdf',text: 'Export PDF',exportOptions: {columns: ':visible'},                     
            customize: function (doc) {         
            doc.defaultStyle.fontSize = 10;}},          
            {extend: 'print',text: 'Imprimer'}            
        ],

Help me, the font is not "Arial"

colin

Hi @Romuald ,

I think you need to also set the font in the defaultStyle, not just the font size. Try also adding

doc.defaultStyle.fontSize = 'Arial';

Cheers,

Colin

Romuald

Hi @Colin

I thank you for your quick response

doc.defaultStyle.fontSize = 'Arial';

With fontSize I can define the size but I would like modify the font 'Roboto' in 'Arial'.

I try with fontfamily but this no work :

pdfMake.fonts = {
        Arial: {
                normal: 'arial.ttf',
                bold: 'arialbd.ttf',
                italics: 'ariali.ttf',
                bolditalics: 'arialbi.ttf'
        }
};

$(document).ready(function() {    

oTable = $('#tableau').DataTable( { 
     dom: 'Bfrtip',
        "buttons": [
            {extend: 'copy',text: 'Copier',},
            {extend: 'csv',text: 'Export CSV'},
            {extend: 'excel',text: 'Export Excel'},
            {extend: 'pdf',text: 'Export PDF',exportOptions: {columns: ':visible'},                     
            customize: function (doc) {         
            doc.defaultStyle.font-family = 'Arial';},},         
            {extend: 'print',text: 'Imprimer}

I'm not see my error ???

Thank you for help

colin

I'm sorry, that was a silly cut&paste error on my part, I meant to say give this a try:

doc.defaultStyle.font = 'Arial';

See a SO thread here,

C

Romuald

Hi @Colin

I thank you for your quick response

The fonts is changing work now

I would like change the fonts because a character in column Windows 7 is not good when I export in PDF (See copy screen) :

In the file Index.php:

<tr>
                            <td><?php echo utf8_encode($obj->Nom); ?></td>
                            <td><?php echo htmlspecialchars($obj->Version); ?></td>                     
                            <td><?php echo utf8_encode($obj->Editeur); ?></td>
                            <td align="center"><?php if( $os_windows7 === true ) echo utf8_decode('✔'); ?></td>
                            <td align="center"><?php if( $os_windows10 === true ) echo utf8_decode('✔'); ?></td>
                        </tr>

My character : https://outils-javascript.aliasdmc.fr/encodage-caracteres-formulaire/encode-caractere-2714-html-css-js-autre.html

I'm not see my error ?

Thank you very much

colin

Hi @Romuald ,

This thread here may help now. It shows how to change a character on the export - in that thread's case it's modifying a checkbox into a "Y" or "N". You could do something similar to modify your checkbox.

Cheers,

Colin

Romuald

Hi @Colin,

Good...this work

Now I search how I can aligment the last column only...

Thank you very much

Romuald