How to export images in dynamic column image?

marky143

I have a datatable with column images. Now the situation is like this. My DataTable it has responsive and colReorder function, and I reOrder the columns using a div (image below) with jQuery sortable().

Now when I export it to pdf I found that the image is empty as what I read in some solution is converting the image to 64 string, and insert the base64.

I did this, putting the encoded URL:

// HTML
<img class="img-circle img-thumbnail img-responsive convertTo64" src="{{ $path }}">

// JS
function toDataURL(src, callback, outputFormat) {
    var img = new Image();
        img.setAttribute("crossOrigin", "anonymous");
        img.onload = function() {
            var canvas = document.createElement('canvas');
                canvas.height = this.naturalHeight;
                canvas.width = this.naturalWidth;

            var ctx = canvas.getContext('2d');
                ctx.drawImage(this, 0, 0);
            var dataURL;
            dataURL = canvas.toDataURL(outputFormat);
            callback(dataURL);
        };
        img.src = src;
}
$.each($('.convertTo64'), function(index, val) {
    var that = $(this);
    var url = $(this).attr('src');

    toDataURL(url, function(dataUrl) {
        that.attr('src', dataUrl)
    });
});

In the example above, let's assume that the column image is in index 1. Works great in here, but the problem is:
How can I detect the column image if the user re-ordered the columns?

Any help would be appreciated.

Thanks

allan

You are using $('.convertTo64') as the selector, so it shouldn't matter what column the data is in. It will automatically find the elements regardless of where they are in the page.

You just need to make sure you rerun that operation every on every draw (possibly also column-reorder).

Allan

marky143

Hi Allan,

Thank you for your quick response.

But my question is lacking, sorry.

I am exporting PDF using pdfmake, and customize callback

    customize: function ( doc ) {
        doc.content[1].layout = 'lightHorizontalLines';
        var toImg64 = [];
        // Get the encoded url
        $.each( $('.convertTo64') , function(index, val) {
            var that = $(this);
            toImg64.push(that.attr('src'))
        });

        var base64Url;
        for (var i = 1; i < doc.content[1].table.body.length; i++ ) {
            base64Url = toImg64[i-1];
            doc.content[1].table.body[i][1] = {
                image: base64Url,
                fit: [70, 70]
            }
        }
    },

Is this example, I just select the index 1 since that is the column image now How can I detect the column image if the user re-ordered the columns?

Hope I delivered it well.

Thanks

allan

I’d put a class on the image column using columns.className, Then you can use column().index() to find out where it is now - e.g. table.column(‘.myImageColumn’).index();.

Allan

marky143

Thank you Allan, it's working now

sameesultani76

how to export image to excel

kthorngren

@sameesultani76 See this thread from earlier today asking the same question.

Kevin

macmicro

Good morning
I'm reading this topic here https://datatables.net/forums/discussion/63491/how-to-export-images-in-dynamic-column-image
I added a class to the column containing the images
I also use colreorder
in the script you use index 1

but I don't know how to use
table.column(‘.myImageColumn’).index();
and .myImageColumn is the column class or the image class
in the script what should be replaced or modified