Jexcel | Image

Rendering images on the jExcel spreadsheet - Jquery plugin.

by Spreadsheet Online

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://bossanova.uk/components/jexcel/dist/js/jquery.jexcel.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/components/jexcel/dist/css/jquery.jexcel.css">
<div id='my'></div>

<p>
<button id='upload'>Convert to CSV</button>
<button id='json'>Convert to JSON</button>
</p>

<textarea id='txt' style='width:400px;height:120px'></textarea>

CSS

.jexcel > tbody > tr > td > img
{
  display:block;
}

JavaScript

var data = [
	['https://images.store.hmv.com/app_/responsive/HMVStore/media/product/40999/01-40999.jpg?w=100', 'St Vincent – Masseduction'],
['https://images.store.hmv.com/app_/responsive/HMVStore/media/product/283598/01-283598.jpg?w=100', 'Kendrick Lamar – Damn']
]

$('#my').jexcel({
    data:data,
    colWidths: [300, 200],
});

$('#my').jexcel('updateSettings', {
    table: function (instance, cell, col, row, val, id) {
        if (col == 0) {
            $(cell).html('<input type="hidden" value="'+ val +'"><img src="' + val + '">')
        }
    }
})