How can I read an Excel File with JavaScript (without ActiveXObject)

Question

My friend asked me to make for a simple application to generate charts (bar, curves) from an Excel file. I opted to use JavaScript as a language since I know already the pow

Answer 1

i think without the use of ActiveX you cant read the excel file..I am not sayin that you cant read excel file file without ActiveX may be there is a way ,but i dont know that way so if you want to read using Activex then here is the code you can use for reading the excel file

<input type="button" id="btnSubmit" onclick="readdata(1, 2)" value="Submit" />
<script>
var xVal = 1;
var yVal = 2

    function readdata(x,y) {
        x = xVal;
        y = yVal;
        try {
            var excel = new ActiveXObject("Excel.Application");
            excel.Visible = false;
            var excel_file = excel.Workbooks.Open("D:\\Test.xls");// alert(excel_file.worksheets.count);
            var excel_sheet = excel_file.Worksheets("Sheet1");

            for(i=0;i<5;i++)
            {
               var data = excel_sheet.Cells(i,2).Value;
                drawWithexcelValue(data);
            }


        }
        catch (ex) {
            alert(ex);
        }

</script>

it will run only in IE 9 and above ,and you have to activate activeX functionality from the settings ..

Answer 2

Here is another perspective on this problem, instead of reading an Excel file with JavaScript, you could directly use JavaScript in Excel with the help of the Funfun Excel add-in. Basically, Funfun is a tool that allows you to use JavaScript in Excel so you could use libraries like Chart.js to plot chart from the data in the spreadsheet.

Basically, what you need to do is

1). Insert the Funfun add-in from Office Add-ins store

2). Create a new Funfun or load a sample from Funfun online editor

3). Write JavaScrip code as you do in any other JavaScript editor. In this step, in order to directly use the data from the spreadsheet, you need to write some JSON I/O to make Excel cell reference. The place this value is in Setting-short But this would be just several lines. For example, let's assume we have some data like below in the spreadsheet. The Average hours is in cell A1.

Average hours    Jan    Feb   Mar    Apr
Baby Jones       93.5   81    94.5   95.5
Joanne Jones     91.5   90    88.5   85.5

In this case, the JSON I/O value would be:

{
    "months": "=C6:G6",
    "manager1": "=C7:G7",
    "manager2": "=C8:G8"
}

You could check the Funfun documentation for more explanation.

4). Run the code to plot chart

Here is a sample chart that I made using JavaScript(Chart.js) and Excel data on Funfun online editor. You could check it on the link below. You could also easily load it to your Excel as described in Step2.

https://www.funfun.io/1/edit/5a365e7c74efa7334ff272a6

Disclosure: I'm a developer from Funfun.

Answer 3

There is a Chart.js plugin chartjs-plugin-datasource that makes it easy to load data from Excel files.

Let's suppose you have an Excel file as shown below, and it is saved as mydata.xlsx in the same directory as your HTML file:

+---------------+---------+----------+-------+-------+------+------+------+
|               | January | February | March | April | May  | June | July |
+---------------+---------+----------+-------+-------+------+------+------+
| Temperature   |       7 |        7 |    10 |    15 |   20 |   23 |   26 |
+---------------+---------+----------+-------+-------+------+------+------+
| Precipitation |     8.1 |     14.9 |  41.0 |  31.4 | 42.6 | 57.5 | 36.0 |
+---------------+---------+----------+-------+-------+------+------+------+

Include Chart.js, SheetJS (js-xlsx) and chartjs-plugin-datasource in your page:

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"> </script>

<canvas id="myChart"></canvas>

Then, specify mydata.xlsx in your script.

var ctx = document.getElementsById("myChart");
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            type: 'line',
            yAxisID: 'temperature',
            backgroundColor: 'transparent',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            tension: 0,
            fill: false
        }, {
            yAxisID: 'precipitation',
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            borderColor: 'transparent'
        }]
    },
    plugins: [ChartDataSource],
    options: {
        scales: {
            yAxes: [{
                id: 'temperature',
                gridLines: {
                    drawOnChartArea: false
                }
            }, {
                id: 'precipitation',
                position: 'right',
                gridLines: {
                    drawOnChartArea: false
                }
            }]
        },
        plugins: {
            datasource: {
                url: 'mydata.xlsx'
            }
        }
    }
});

Answer 4

There are JavaScript libraries which allow XLS & XLSX to be parsed in pure JavaScript. I tested with Chrome (albeit on Windows) and it worked fine.