How I change font-family in PDF Export

How I change font-family in PDF Export

RomualdRomuald Posts: 12Questions: 2Answers: 0

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" :neutral:

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 4,656Questions: 0Answers: 817
    Answer ✓

    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

  • RomualdRomuald Posts: 12Questions: 2Answers: 0

    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

  • colincolin Posts: 4,656Questions: 0Answers: 817
    edited September 2018 Answer ✓

    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

  • RomualdRomuald Posts: 12Questions: 2Answers: 0

    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('&#10004;'); ?></td>
                                <td align="center"><?php if( $os_windows10 === true ) echo utf8_decode('&#10004;'); ?></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

  • colincolin Posts: 4,656Questions: 0Answers: 817
    Answer ✓

    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

  • RomualdRomuald Posts: 12Questions: 2Answers: 0

    Hi @Colin,

    Good...this work :)

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

    Thank you very much

    Romuald

Sign In or Register to comment.