Trying to dynamically create a pdf using pdfMake from JSON data and the report runs fine except for my images.
I have tried using named keys into an object as well as pushing into an array, and even directly into the docDefinition and it appears that they contain the data on console.log but always come back undefined.
The only time it actually works if I directly assign it outside of the each ( //imageData["image0"] = testDataURL;) but this doesn't work for me as I need to get the dataurl of each image of each "student" record.
It must be a scope issue or asynchronous issue. Please help.
function getBase64Image(url, onSuccess, onFail, outputFormat){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image();
//img.crossOrigin = 'Anonymous';
img.onload = function(){
var dataURL = "";
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
onSuccess(dataURL);
canvas = null;
};
img.onerror = function(e){
onFail("No Image");
}
img.src = url;
} buildPdf = function(studentData){
var docDefinition = {"content": [],"images":{},"styles":{},"defaultStyle":{}};
var imageData = {};
var imageData2 = [];
$j(studentData).each(function(index, student){
docDefinition.content.push({"text": "Medical Care Plan","style": "title"});
docDefinition.content.push({"columns":[{"text": [{"text": "Name: ", "style": "label"},{"text": student.first_name + " " + student.last_name + "\n"},
{"text" : "Grade: ", "style": "label"},
{"text" : student.grade_level + "\t"},
{"text" : "HRM: ", "style": "label"},
{"text" : student.home_room + "\t"},
{"text" : "Bus#: ", "style": "label"},
{"text" : student.bus_route + "\n"},
{"text": "Teacher: ", "style": "label"},
{"text" : "Teacher Name goes here\n\n"},
{"text": "Doctor: ", "style": "label"},
{"text" : student.doctor_name + "\t"},
{"text" : "Doctors Phone: ", "style": "label"},
{"text" : student.doctor_phone + "\n"},
{"text" : "Health Card: ", "style": "label"},
{"text" : student.ON_HealthCard_Number}],width:400 },
{"image": "image0","fit" : [100, 100], "alignment" : "left", width : "*"}]});
getBase64Image('/admin/stp/'+student.stuId+'ph.jpeg',function(base64Img){
imageData["image0"]=base64Img;
imageData2[index]=base64Img;
//docDefinition.images["image"+index]=base64Img;
},function(errorMsg){
getBase64Image('/images/TLDSB_Custom/photo_not_available_BW.png',function(base64Img){
imageData["image0"]=base64Img;
imageData2[index]=base64Img;
});
});
});
//console.log(imageData2.length);
//imageData["image0"] = testDataURL;
//docDefinition.images["image0"]=imageData["image0"];
docDefinition.styles.title = { fontSize: 20, bold: true, alignment: 'center'};
docDefinition.styles.heading = { fontSize: 14,margin: [0, 5, 0, 0],bold: true};
docDefinition.styles.subheading = { fontSize: 14,margin: [5, 0, 0, 0],bold: true};
docDefinition.styles.smallHeader = { fontSize: 10,margin: [0, 5, 0, 0],bold:true};
docDefinition.styles.small = { fontSize: 8 };
docDefinition.styles.label = { bold: true };
docDefinition.styles.indent = { margin: [20, 0, 0, 0] };
docDefinition.styles.tableHeader = { bold: true, fontSize: 13 };
docDefinition.defaultStyle = { fontSize: 10 };
//console.log(studentData);
console.log(docDefinition);
//pdfMake.createPdf(docDefinition).open();
pdfMake.createPdf(docDefinition).download('MedicalCarePlan.pdf');
closeLoading();
};
