How to add photo before title in PDF page when exporting?

FRS4002

I need to add photo (logo) before the title at the top of PDF page when exporting. This link
https://datatables.net/forums/discussion/48671/export-pdf-with-images
didn't help much, since I have a different code. Here is the code:

            let mytable = $('#mytable').DataTable({
              initComplete: function () {
                $('.dt-buttons').removeClass('btn-group');
                $('.buttons-print').removeClass('btn-secondary').addClass('btn-success');
                $('.buttons-pdf').removeClass('btn-secondary').addClass('btn-success');
              },
              dom: 'Brt',
              "ordering": false,
              buttons: [
                {
                  extend: 'print',
                  messageTop: 'test',
                  exportOptions: {
                    columns: [2, 1, 0]
                  },
                  title: '<?=(isset($infoQuery['name'])?$infoQuery['name']:'');?>',
                  customize: function (doc) {
                    $(doc.document.body).css('text-align', 'center');
                    $(doc.document.body).find('table').css('text-align', 'right');
                  },
                },
                {
                  extend: 'pdfHtml5',
                    messageTop: function () {
                      return 'first message \n second message';
                      },
                  exportOptions: {
                    columns: [2, 1, 0]
                  },
                  title: '<?=(isset($infoQuery['name'])?$infoQuery['name']:'');?>',
                  customize: function (doc) {
                    doc.content[1].alignment = 'center';
                    doc.styles.tableBodyEven.alignment = 'center';
                    doc.styles.tableBodyOdd.alignment = 'center';
                    var objLayout = {};
                                 objLayout['hLineWidth'] = function(i) { return .5; };
                                 objLayout['vLineWidth'] = function(i) { return .5; };
                                 objLayout['hLineColor'] = function(i) { return '#aaa'; };
                                 objLayout['vLineColor'] = function(i) { return '#aaa'; };
                                 objLayout['paddingLeft'] = function(i) { return 4; };
                                 objLayout['paddingRight'] = function(i) { return 4; };
                                 doc.content[2].layout = objLayout;
                    var colCount = new Array();
                    $('table').find('tbody tr:first-child td').each(function(){
                      if($(this).attr('colspan')){
                        for(var i=1;i<=$(this).attr('colspan');$i++){
                          colCount.push('*');
                        }
                      }else{
                        colCount.push('*');
                      }
                    });
                    doc.content[2].table.widths = colCount;
                  },
                },
              ],
            });

Should I convert my image to base64? I went to https://www.base64-image.de/ website and uploaded the photo and I got this code:
data:image/png;base64,...
Now how can I add this to my code? I need to add it before the title in PDF. Also, how can datatables locate the destination of the photo. It is inside the project folder in /test/images/logo2.png

kthorngren

Did you look at the example Allan linked to in the thread? It shows how to add images to the PDF.

Kevin

FRS4002

@kthorngren Yeah I said I already saw it, but it didn't really help to be honest, since my code is a little bit different... For example, how does datatables will recognize the location of the of photo /test/images/logo2.png? It isn't mentioned in the link... Will it be recognized automatically or I should provide the destination of the photo? If so, how?

kthorngren

Its not Datatables that decides where to place the image. The PDF doc has an array for the content called doc.content. The placement of the image in the array dictates where it will be shown in the doc. See my example at the end of the thread.

Datatable uses PDFMake to export to PDF. As noted in the pdfHtml5 docs you will need to use the PDFMake docs to learn how to customize the export.

My suggestion is to add lines 8-12 of the example at the end of your customize function. Does it work as is?

Kevin

FRS4002

@kthorngren I tried to add lines 8-12, but the photo didn't show. Maybe, it didn't appear because of the path... Kevin, what I meant by destination is path. The path of photo I already said this example, /test/images/logo2.png or C:/pictures/logo2.png the path of the photo in my computer. Will it be recognized automatically or I should manually add the path? If so, how? Here is the code:

let mytable = $('#mytable').DataTable({
  initComplete: function () {
    $('.dt-buttons').removeClass('btn-group');
    $('.buttons-print').removeClass('btn-secondary').addClass('btn-success');
    $('.buttons-pdf').removeClass('btn-secondary').addClass('btn-success');
  },
  dom: 'Brt',
  "ordering": false,
  buttons: [
    {
      extend: 'print',
      messageTop: 'test',
      exportOptions: {
        columns: [2, 1, 0]
      },
      title: '<?=(isset($infoQuery['name'])?$infoQuery['name']:'');?>',
      customize: function (doc) {
        $(doc.document.body).css('text-align', 'center');
        $(doc.document.body).find('table').css('text-align', 'right');
      },
    },
    {
      extend: 'pdfHtml5',
        messageTop: function () {
          return 'first message \n second message';
          },
      exportOptions: {
        columns: [2, 1, 0]
      },
      title: '<?=(isset($infoQuery['name'])?$infoQuery['name']:'');?>',
      customize: function (doc) {
        doc.content[1].alignment = 'center';
        doc.styles.tableBodyEven.alignment = 'center';
        doc.styles.tableBodyOdd.alignment = 'center';
        var objLayout = {};
                     objLayout['hLineWidth'] = function(i) { return .5; };
                     objLayout['vLineWidth'] = function(i) { return .5; };
                     objLayout['hLineColor'] = function(i) { return '#aaa'; };
                     objLayout['vLineColor'] = function(i) { return '#aaa'; };
                     objLayout['paddingLeft'] = function(i) { return 4; };
                     objLayout['paddingRight'] = function(i) { return 4; };
                     doc.content[2].layout = objLayout;
        var colCount = new Array();
        $('table').find('tbody tr:first-child td').each(function(){
          if($(this).attr('colspan')){
            for(var i=1;i<=$(this).attr('colspan');$i++){
              colCount.push('*');
            }
          }else{
            colCount.push('*');
          }
        });
        doc.content[2].table.widths = colCount;
        doc.content.splice( 1, 0, {
                        margin: [ 0, 0, 0, 12 ],
                        alignment: 'center',
                        image: 'data:image/png;base64,...'
                    } );
      },
    },
  ],
});

I can't post the whole base64 code.

kthorngren

The path doesn't matter. The base64 code contains the converted picture data. The actual file is not used.

Did you try the base64 code from the example? Does it work? If it works then there is a problem generating the base64 code for the picture.

Kevin

FRS4002

@kthorngren Oh my god! I think I found the issue! It seems the issue is with the version of pdfmake... Does datatables supports the latest version of pdfmake? Because, it is stated in the website that it has v0.1.36, because the latest stable version of pdfmake in their official website is 0.2.x. Definitely, it is pdfmake version... I am not using the same pdfmake version that is available in the datatables because it does not support Arabic language even if I change the vs-fonts it does not support RTL support. That's why I downloaded another modified version of pdfmake that supports Arabic and RTL. Now I don't know what should I do... Literally, now most of my work will be gone... I am really upset now... What should I do?

FRS4002

@kthorngren I think the modified version has some changes related to show the photos in the PDF page. It is not only because it is another version...

kthorngren

Found this thread about PDFMake versions.

Kevin

FRS4002

@kthorngren That won't help because it is not only version issue, it is modified code issue. This is where I bring pdfmake and vs-fonts from. Please check it out https://github.com/moaazhomaid/pdfmake-arabic
Could you please try this locally (in a text editor) instead of the pdfmake that is available in the datatables and check if the photo will work and tell me the results please. Thanks.

kthorngren

I'm not sure what you are asking us to do with this but if you have problems with a third party PDFMake library then please contact the author of the library for help.

If you would like help from us please provide a test case with the PDFMake library you are using and the base64 code for the photo.

You have not answered the question about the image in the example. Does it work in your environment?

Kevin

kthorngren

I tried the Arabic library you pointed to with the code from the example and it doesn't work. You will need to contact the developer of this library for support since its not developed by Datatables nor PDFMake. There must be something they are doing that conflicts with the customize function Datatables uses.

I tried the example code with PDFMake 0.2.5 and it works:
http://live.datatables.net/deciweca/1/edit

Kevin

FRS4002

@kthorngren I can't reach the developer, also the developer will not see my message. Anyways, thanks Kevin!

FRS4002

@kthorngren Maybe I have an idea... I will just keep print button and remove pdf button, and when I need to download PDF file I can click on print button then choose "save as pdf". This way the table will be downloaded exactly as it is, without having issues regarding of Arabic language and RTL. Now I just need to customize the print display. Do you think it is a good idea?

kthorngren

I guess if that solution works for you then its a good idea. Otherwise you will need to work with the developer or debug the pdfmake-aribic code yourself or find another solution that does something similar.

Kevin