CODEWITHSUNDEEP
javascriptjqueryexcelexport
Danish Adeel
Danish Adeel

Reputation: 730

Export excel with header including image

I am exporting an Excel file in my project with following code:

var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,', 
        template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>', 
        base64 = function(s) { 
            return window.btoa(unescape(encodeURIComponent(s))) 
        }, 
        format = function(s, c) { 
            return s.replace(/{(\w+)}/g, function(m, p) { 
                return c[p]; 
            }) 
        }

    return function(table, name) {
        if (!table.nodeType) 
            table = document.getElementById(table)
        var ctx = {
            worksheet: name || 'Worksheet', 
            table: table.innerHTML
        }
        var blob = new Blob([format(template, ctx)]);
        var blobURL = window.URL.createObjectURL(blob);
        return blobURL;
    }
})()

$("#btnExport").click(function () {
    var todaysDate = moment().format('DD-MM-YYYY');
    var blobURL = tableToExcel('account_table', 'test_table');
    $(this).attr('download', todaysDate + '.xls')
    $(this).attr('href', blobURL);
});

Fiddle

Now I want to insert a Header in my worksheet including a picture like this. I am unable to find anything related to this, Is this possible or not ?

Thanks.

Upvotes: 2

Views: 11774

Answers (1)

Vinay
Vinay

Reputation: 7674

If you want something like this https://jsfiddle.net/r8bx18kx/ Add

 <img> <h1> etc

at the top and give images URL, can also apply inline styles to the elements for exact layout.

Upvotes: 3

Related Questions