I want to export the data table content as a PDF, including the images in the first column of every row. I am not sure why the image is not being added to the pdf file after export.
Here is my code:
<img class="img-fluid" src="/images/listing/{{$lis->image_path}}" width="100px" height="75px" /></a>
//convert img to base64
function getBase64Image(url, callback) {
var img = new Image();
img.crossOrigin = "anonymous";
var x = img.onload = function () {
var canvas = document.createElement("canvas");
canvas.width =this.width;
canvas.height =this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
callback(dataURL);
};
img.src = url;
}
the export part:
{
extend: 'pdfHtml5',
orientation: 'landscape',
customize: function(doc) {
//find paths of all images
var arr2 = $('.img-fluid').map(function(){
return this.src;
}).get();
for (var i = 0, c = 1; i < arr2.length; i++, c++) {
getBase64Image(arr2[i], function(result){
doc.content[1].table.body[c][0] = {
image: result,
width: 100
}
});
}
},
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
modifier: {
selected: null
},
},
},
