PDF export images error: Unrecognized document structure

osamashaki

Hi,

I'd like to export the PDF with the images that are in the first column of every row in my table. I follow PDFMake documentation but I am getting an error and pdf is not generated due to the error.

If anyone could provide any help, it would be greatly appreciated!

Here is my code:
//convert img to base64

function toDataURL(src){
    var image = new Image();
    image.crossOrigin = 'Anonymous';
 
    image.onload = function(){
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      canvas.height = this.naturalHeight;
      canvas.width = this.naturalWidth;
      context.drawImage(this, 0, 0);
      var dataURL = canvas.toDataURL('image/jpeg');
      return dataURL;
    };
    image.src = src;
}

the export button code:

{
    extend: 'pdfHtml5',
    orientation: 'landscape',
    customize: function(doc) {
        //find paths of all images
        var arr2 = $('.img-fluid').map(function(){
          return this.src;
        }).get();

        for (var i = 0, c = 1; i < arr2.length; i++, c++) {
          doc.content[1].table.body[c][0] = {
            image: toDataURL(arr2[i]),
            width: 100
          }
        }
        
    },

    exportOptions: {
        columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
        modifier: {
            selected: null
        },
        stripHtml : false 
    },
    
},
                

The error details:

Uncaught Unrecognized document structure: {"width":100}
r.preprocessNode @ docPreprocessor.js:60
r.preprocessTable @ docPreprocessor.js:106
r.preprocessNode @ docPreprocessor.js:46
r.preprocessVerticalContainer @ docPreprocessor.js:78
r.preprocessNode @ docPreprocessor.js:40
r.preprocessDocument @ docPreprocessor.js:18
i.tryLayoutDocument @ layoutBuilder.js:148
i.layoutDocument @ layoutBuilder.js:136
r.createPdfKitDocument @ printer.js:117
i._createDoc @ pdfMake.js:41
i.getBuffer @ pdfMake.js:185
i.getBlob @ pdfMake.js:175
i.download @ pdfMake.js:143
action @ buttons.html5.min.js:35
g @ dataTables.buttons.min.js:14
(anonymous) @ dataTables.buttons.min.js:15
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2:

Please let me know how I can make it work. Thanks

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

osamashaki

Hi Colin, here is the test case link: https://jsbin.com/yuzamutele/edit?html,output

Thanks for your help.

allan

Looks like there is something wrong with your toDataURL function - it is returning undefined as you can see by inspecting the resulting PDF document description given to pdfmake:

This is one for a general programming forum such as Stackoverflow really, but your function isn't returning anyway. The onload is, but that doesn't get passed back up and is async to the outer function call anyway. I don't actually know how you'd get the image as a data string in a synchronous manner I'm afraid.

It might need a change to Buttons to allow a Promise to be returned.

Allan

osamashaki

Hi @allan,

May I know if there is a better way to get the image base64 url please?

Thanks

colin

Again, that would be better asked on StackOverflow as that's more of a generic question, rather that DataTables specific,

Colin