Uncaught Unrecognized document structure

Question

I am trying to export data table content as PDF, including the image at the first column, image are encoded to base64 then pass the url in the customize function. With following PDFMake documentation, just need to pass the base64 encode inside doc.content Here is my code:

function toDataURL(src, callback){
    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');
  callback(dataURL);
};
image.src = src;
}

the export button

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

       var img;
       for (var i = 0, c = 1; i < arr2.length; i++, c++) {
            toDataURL(arr2[i], function(dataURL){
                //console.log(dataURL);  
                img = "'" +dataURL+ "'";
                console.log(img);
            })
           
            doc.content[1].table.body[c][0] = 
            {
              image: img, //here is the error
              width: 150
            }
       }
        
      
    },

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

Error: Uncaught Unrecognized document structure: {"width":150}

Could you help me to fix this error please. Thanks

Answer 1

I try to use Google Chrome 97 x86 version, and it works. On 97 x64 version jitsi no video and sound.

https://www.google.com/chrome/?standalone=1&platform=win