docDefinition
スコープ データから動的に作成して PDF を作成しようとしています。
私のデータは常に変化しているため、動的な作成が不可欠です。
以下はこれまでに行ったことですが、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": []
}
]
}