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: 54,716Questions: 1Answers: 8,560 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: 54,716Questions: 1Answers: 8,560 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: 13,817Questions: 25Answers: 3,252
    edited September 7

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

    Kevin

Sign In or Register to comment.