JSON データから pdfMake を使用して動的に pdf を作成しようとすると、私の画像を除いてレポートが正常に実行されます。
名前付きキーをオブジェクトに使用したり、配列にプッシュしたり、docDefinition に直接入力したりしようとしましたが、console.log にデータが含まれているように見えますが、常に未定義で戻ってきます。( )
の外で直接割り当てた場合にのみ実際に機能しますが、各「学生」レコードの各画像のデータ URL を取得する必要があるため、これは機能しません。
スコープの問題または非同期の問題である必要があります。助けてください。each
//imageData["image0"] = testDataURL;
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();
};