Как программно создать PDFmake docDefinition

Question

Я пытаюсь создать PDF-файлы, динамически создавая docDefinition из моих данных области.

Мои данные постоянно меняются, поэтому важно динамическое создание.

Ниже приведено то, что я сделал до сих пор, однако я не могу получить свои изображения для отображения в объекте/массиве docDefinition.

var getExerciseImages = function(exerciseImages) { 

    var imageColumns = []; 
    var imageObject = {}; 

    for (var i = exerciseImages.length - 1; i >= 0; i--) { 

     var url = 'http://files.s3.amazonaws.com/medium/' + exerciseImages[i] + '.jpg' 

     convertImgToBase64URL(url).then(function(result) { 
      imageObject = { 
       image: result, 
       fit: [200, 200] 
      }; 

      imageColumns.push(imageObject); 
     }) 
    }; 

    return imageColumns; 
}; 

var createPdf = function(programme) { 
    var deferred = $q.defer(); 

    var exerciseContainer = []; 
    var columns = []; 

    for (var i = programme.exercises.length - 1; i >= 0; i--) { 

     exerciseContainer.push({ 
      text: programme.exercises[i].exerciseName.toString(), 
      columns: getExerciseImages(programme.exercises[i].images) 
     }); 

    }; 

    var docDefinition = { 
     content: exerciseContainer 

    } 

    deferred.resolve(docDefinition); 

    return deferred.promise; 
}; 


function convertImgToBase64URL(url, callback, outputFormat) { 
    var deferred = $q.defer(); 

    var img = new Image(); 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function() { 
     var canvas = document.createElement('CANVAS'), 
      ctx = canvas.getContext('2d'), 
      dataURL; 
     canvas.height = this.height; 
     canvas.width = this.width; 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL(outputFormat); 
     // callback(dataURL); 
     deferred.resolve(dataURL); 
     canvas = null; 
    }; 
    img.src = url; 

    return deferred.promise; 
}; 


$scope.downloadPdf = function(programme) { 

    createPdf(programme).then(function(docDefinition) { 
     console.log(JSON.stringify(docDefinition)); 
     pdfMake.createPdf(docDefinition).open(); 
    }) 

}; 

Данные, поступающие в структурирована следующим образом:

{ 
    "title": "Core Stability 1", 
    "id": "xt9E59f2tX", 
    "exercises": [ 
     { 
      "exerciseDescription": "Sit on a Gym Ball with thighs parallel to the floor. As you remain relaxed, gently raise the chest and ribs to straighten the spine. Maintain while raising one leg up and down followed by an arm", 
      "exerciseName": "Neutral Spine on Gym ball - Single Arm or Leg lifts ", 
      "images": [ 
       23, 
       24, 
       25, 
       26 
      ], 
      "$$hashKey": "object:8" 
     }, 
     { 
      "exerciseDescription": "Sit on a Gym Ball with thighs parallel to the floor. As you remain relaxed, gently raise the chest and ribs to straighten the spine. ", 
      "exerciseName": "Neutral Spine on Gym Ball ", 
      "images": [ 
       2, 
       3, 
       4, 
       5 
      ], 
      "reps": "1 Min", 
      "sets": "3", 
      "$$hashKey": "object:9" 
     }, 
     { 
      "exerciseDescription": "Sit on a Gym Ball with thighs parallel to the floor. Gently raise the chest and ribs to straighten the spine. Walk the feet forwards and lean backwards allowing the spine and shoulders to rest on the ball", 
      "exerciseName": "Bridge on Gym Ball - Roll Down ", 
      "images": [ 
       15, 
       16, 
       17 
      ], 
      "$$hashKey": "object:10" 
     }, 
     { 
      "exerciseDescription": "Assume the bridge position with neck and shoulders resting on the gym ball. Raise both arms pointing upwards. Move one arm above the head followed by the other", 
      "exerciseName": "Bridge on Gym Ball - Arm Movements ", 
      "images": [ 
       18, 
       19, 
       20, 
       21, 
       22 
      ], 
      "reps": "12", 
      "sets": "3", 
      "$$hashKey": "object:11" 
     } 
    ], 
    "prescribedDate": "2015-04-09T16:23:57.020Z", 
    "$$hashKey": "object:6" 
} 

Это насколько у меня с docDefinition:

{ 
    "content": [ 
     { 
      "text": "Half Squat ", 
      "columns": [] 
     }, 
     { 
      "text": "Wall Press Up", 
      "columns": [] 
     }, 
     { 
      "text": "Superman - Arm and Leg Lift", 
      "columns": [] 
     }, 
     { 
      "text": "Prone Cobra - Double Arm Shoulder Press ", 
      "columns": [] 
     } 
    ] 
} 

Answer 1

сначала загрузить все изображения в массив. Затем создайте dataURL с помощью canvas и загрузите dataURL во второй массив. Затем передайте массив dataURL для созданияPdf

createDataURLs = function (imgs,dataURLs){ 
     var canvas = document.createElement('CANVAS'), 
      ctx = canvas.getContext('2d'); 
     for(var i=0;i<imgs.length;i++){ 
      var img=imgs[i]; 
      canvas.width = img.width; 
      canvas.height = img.height; 
      ctx.drawImage(img, 0, 0, img.width, img.height); 
      dataURLs[img.index] = canvas.toDataURL(img.format);  
     } 

     createPdf(dataURLs); 
    } 

    loadAllImages = function (imageURLs, callback){ 
     var imgs = []; 
     var dataURLs = []; 
     var imagesOK=0; 
     for (var i=0; i<imageURLs.length; i++) { 
      var img = new Image(); 
      img.format=imageURLs[i].format; 
      imgs.push(img); 
      dataURLs.push(''); 
      img.index=imgs.length-1; 
      img.onload = function(){ 
       imagesOK++; 
       if (imagesOK>=imageURLs.length) { 
        callback(imgs,dataURLs); 
       } 
      }; 
      img.onerror=function(){alert("image load failed");} 
      img.crossOrigin="anonymous"; 
      img.src = imageURLs[i].url; 
     } 
    } 

    buildImageURLs = function(studentData){ 
     var imageURLs = []; 
     for (var i = exerciseImages.length - 1; i ++) { 

      imageURLs.push({url:'http://files.s3.amazonaws.com/medium/' + exerciseImages[i] + '.jpg',format:'image/jpeg'}) 
     } 
     loadAllImages(imageURLs, createDataURLs); 
    }