Javascript jExcel Library Example to Create Excel Spreadsheets (.XLSX) Files Using Dynamic Data in Browser

Welcome folks today in this blog post we will be using the jExcel library to create excel spreadsheets (.xlsx) files using dynamic data in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<html>
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />

<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id="spreadsheet"></div>

</html>

<html>

</html>

As you can see in the above html code we are including the cdn of the jexcel library and then we have the div where we will be embedding the spreadsheet excel file

script.js

var data = [
        ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
        ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
    ];

    jspreadsheet(document.getElementById('spreadsheet'), {
        data: data,
        columns: [
            {
                type: 'text',
                title: 'Car',
                width: 90
            },
            {
                type: 'dropdown',
                title: 'Make',
                width: 120,
                source: [
                    "Alfa Romeo",
                    "Audi",
                    "Bmw",
                    "Chevrolet",
                    "Chrystler",
                    // (...)
                ]
            },
            {
                type: 'calendar',
                title: 'Available',
                width: 120
            },
            {
                type: 'image',
                title: 'Photo',
                width: 120
            },
            {
                type: 'checkbox',
                title: 'Stock',
                width: 80
            },
            {
                type: 'numeric',
                title: 'Price',
                mask: '$ #.##,00',
                width: 80,
                decimal: ','
            },
            {
                type: 'color',
                width: 80,
                render: 'square',
            },
        ]
    });

var data = [

['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],

['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],

];

jspreadsheet(document.getElementById('spreadsheet'), {

data: data,

columns: [

{

type: 'text',

title: 'Car',

width: 90

{

type: 'dropdown',

title: 'Make',

width: 120,

source: [

"Alfa Romeo",

"Audi",

"Bmw",

"Chevrolet",

"Chrystler",

// (...)

]

{

type: 'calendar',

title: 'Available',

width: 120

{

type: 'image',

title: 'Photo',

width: 120

{

type: 'checkbox',

title: 'Stock',

width: 80

{

type: 'numeric',

title: 'Price',

mask: '$ #.##,00',

width: 80,

decimal: ','

{

type: 'color',

width: 80,

render: 'square',

]

});

As you can see in the above javascript code we are having the dynamic data defined inside an array of cars and then we are using the jExcel library to pass the reference of the element where we will mount the spreadsheet and then we are passing the data and then we are defining the columns and their schema as well.