How to export images in dynamic column image?

How to export images in dynamic column image?

marky143marky143 Posts: 7Questions: 2Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited July 2020

    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

  • marky143marky143 Posts: 7Questions: 2Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • marky143marky143 Posts: 7Questions: 2Answers: 0

    Thank you Allan, it's working now

  • sameesultani76sameesultani76 Posts: 1Questions: 0Answers: 0

    how to export image to excel

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited September 2021

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

    Kevin

  • macmicromacmicro Posts: 15Questions: 0Answers: 0

    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

Sign In or Register to comment.