web-dev-qa-db-fra.com

Comment puis-je lire un fichier Excel avec JavaScript (sans ActiveXObject)

Mon ami m'a demandé de créer une application simple pour générer des graphiques (barres, courbes) à partir d'un fichier Excel. J'ai choisi d'utiliser JavaScript comme langue car je connais déjà le puissant chart.js. Cependant, avant d'utiliser chart.js, je dois collecter des données à partir du fichier Excel. Alors, comment lire un fichier Excel via JavaScript?

Après quelques recherches, j'ai réussi à le faire avec Internet Explorer avec (en utilisant ActiveX), mais j'en ai besoin pour fonctionner sur tous les navigateurs.

javascriptexcelchartshighcharts
13
Slifer

Il existe des bibliothèques JavaScript qui permettent à XLS & XLSX d'être analysées en JavaScript pur. J'ai testé avec Chrome (quoique sous Windows) et cela a bien fonctionné.

10
Robert MacLean

Voici une autre perspective de ce problème, au lieu de lire un fichier Excel avec JavaScript, vous pouvez directement utiliser JavaScript dans Excel à l'aide du complément Funfun Excel. Fondamentalement, Funfun est un outil qui vous permet d'utiliser JavaScript dans Excel afin que vous puissiez utiliser des bibliothèques comme Chart.js pour tracer le graphique à partir des données de la feuille de calcul.

Fondamentalement, ce que vous devez faire est

1). Insérez le complément Funfun à partir du magasin de compléments Office

enter image description here

2). Créez un nouveau Funfun ou chargez un échantillon depuis l'éditeur en ligne Funfun

enter image description here

3). Écrivez le code JavaScrip comme vous le faites dans n'importe quel autre éditeur JavaScript. Dans cette étape, afin d'utiliser directement les données de la feuille de calcul, vous devez écrire des E/S JSON pour faire référence aux cellules Excel. L'endroit où cette valeur est Setting-short Mais ce ne serait que plusieurs lignes. Par exemple, supposons que nous avons des données comme ci-dessous dans la feuille de calcul. La moyenne des heures est dans la cellule 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

Dans ce cas, la valeur d'E/S JSON serait:

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

Vous pouvez vérifier le Funfun documentation pour plus d'explications.

4). Exécutez le code pour tracer le graphique

Voici un exemple de graphique que j'ai créé en utilisant JavaScript (Chart.js) et des données Excel sur l'éditeur en ligne Funfun. Vous pouvez le vérifier sur le lien ci-dessous. Vous pouvez également le charger facilement dans votre Excel comme décrit à l'étape 2.

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

Divulgation: je suis un développeur de Funfun.

4
Chuan Qin

Il existe un plugin Chart.js chartjs-plugin-datasource qui facilite le chargement des données à partir de fichiers Excel.

Supposons que vous ayez un fichier Excel comme indiqué ci-dessous et qu'il soit enregistré en tant que mydata.xlsx dans le même répertoire que votre fichier HTML:

+---------------+---------+----------+-------+-------+------+------+------+
|               | 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 |
+---------------+---------+----------+-------+-------+------+------+------+

Incluez Chart.js, SheetJS (js-xlsx) et chartjs-plugin-datasource dans votre page:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"> </script>

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

Ensuite, spécifiez mydata.xlsx dans votre 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'
            }
        }
    }
});
1
nagix