DataTables logo
≡

Export PDF with different Font not finding new font

Export PDF with different Font not finding new font

JLegaultJLegault Posts: 31Questions: 6Answers: 2
in Buttons

Link to test case: Was unable to re-create un live.datatables.net
Debugger code (debug.datatables.net): ipagad
Error messages shown: Uncaught File 'CourierPrime-Regular.ttf' not found in virtual file system
Description of problem:

I am unable to create html5 buttons on live.datatables.net, but I may just be doing something wrong there.

My main issue is I cannot change the font family that the PDF export is using.

Within my DataTable Creation:

 {
                extend: 'pdfHtml5',
                text: '<i class="far fa-file-pdf fa-lg text-primary"></i>',
                titleAttr: 'Export to PDF',
                className: 'btn-light',
                exportOptions: {
                    columns: [7, 5, 6, 1, 2, 0, 3, 4],
                    orthogonal: 'export',
                    modifier: {
                        selected: false
                    }
                },
                customize: function(doc){
                    doc.defaultStyle.font = 'Courier'
                }
            }

Run at window load:

pdfMake.fonts = {
    Courier: {
        normal: 'CourierPrime-Regular.ttf',
        bold: 'CourierPrime-Bold.ttf',
        italics: 'CourierPrime-Italic.ttf',
        bolditalics: 'CourierPrime-BoldItalic.ttf'
    },
    Roboto: {
        normal: 'Roboto-Regular.ttf',
        bold: 'Roboto-Medium.ttf',
        italics: 'Roboto-Italic.ttf',
        bolditalics: 'Roboto-MediumItalic.ttf'
    }
}

My vfs_fonts.js file:

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
  "CourierPrime-Bold.ttf": "AAEAAAAQAQAABAAAR0RFRgRvCGUAAQx8AAAAPEdTVUL+f/UDAAEMuAAAA85PUy8ycfS...",
  "CourierPrime-BoldItalic.ttf": "AAEAAAAQAQAABAAAR0RFRgRuBqoAASZ8AAAANEdTVUKLPZ4SAAEmsAAAB5ZPU...",
  "CourierPrime-Italic.ttf": "AAEAAAAQAQAABAAAR0RFRgRuBqoAASMEAAAANEdTVUKLPZ4SAAEjOAAAB5ZPUy8yc...",
  "CourierPrime-Regular.ttf": "AAEAAAAQAQAABAAAR0RFRgRvCHsAAQYUAAAAPEdTVUL+f/UDAAEGUAAAA85PUy8y...",
  "Roboto-Italic.ttf": "AAEAAAARAQAABAAQR0RFRqNLn+AAAd9EAAACWEdQT1PBrAqiAAHhnAAAZdhHU1VCgv9Z+gA...",
  "Roboto-Medium.ttf": "AAEAAAARAQAABAAQR0RFRqNLn+AAAcmUAAACWEdQT1MwpMVlAAHL7AAAZgxHU1VCgv9Z+gA...",
  "Roboto-MediumItalic.ttf": "AAEAAAARAQAABAAQR0RFRqNLn+AAAd/MAAACWEdQT1MwpMVlAAHiJAAAZgxHU1VCg...",
  "Roboto-Regular.ttf": "AAEAAAARAQAABAAQR0RFRqNLn+AAAclUAAACWEdQT1PBrAqiAAHLrAAAZdhHU1VCgv9Z+g...",
  "sampleImage.jpg": "/9j/4RC5RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABA..."
};

I know this isn't exactly a DataTables related issue, more a pdfmake issue, but I followed all the steps found here and I'm still getting the error shown above.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    This thread should help, it's asking the same thing.

    Cheers,

    Colin

  • JLegaultJLegault Posts: 31Questions: 6Answers: 2

    That thread seems to highlight the issue that arises when vfs_fonts.js is included before pdfmake, my includes do not do this.

    <script type="text/javascript" src="common/js/min/pdfmake.min.js?r=<?=$vrs?>"></script>
<script type="text/javascript" src="common/js/min/vfs_fonts.js?r=<?=$vrs?>"></script>

    I am trying to add an additional font family to the pdfmake options, but it is not applying.

    Is there anywhere in the DataTables library where it might be over-writing my font addition? Based on pdfmake's documentation I think I should have a valid Courier font option but DataTables won't export it.

  • allanallan Posts: 65,813Questions: 1Answers: 10,949 Site admin
    Answer ✓

    The only thing I can thing of is that pdfMake might point to a different instance? If you run $.fn.DataTable.Buttons.pdfMake().vfs on your console, does it show Courier there?

    Failing that, we'd need a link to a test case.

    Allan

  • JLegaultJLegault Posts: 31Questions: 6Answers: 2

    Yes!

    Running $.fn.DataTable.Buttons.pdfMake().vfs gave me only the Roboto that automatically comes with pdfmake.

    I swapped the order of pdfmake and DataTables in my headers so that my vfs_fonts came after the DataTables js file:

    <script type="text/javascript" src="common/js/min/datatables.min.js?r=<?=$vrs?>"></script>
<script type="text/javascript" src="common/js/min/pdfmake.min.js?r=<?=$vrs?>"></script>
<script type="text/javascript" src="common/js/min/vfs_fonts.js?r=<?=$vrs?>"></script>

    My guess is somewhere within the datatables min file it is re-defining the pdfmake.fonts object; not an issue just something to note for anyone else trying to customize pdfmake font family.

This discussion has been closed.