logo标签列表

如何使用JavaScript（无需ActiveXObject）读取Excel文件

javascriptexcelchartshighcharts
14

我的朋友让我做一个简单的应用程序，从Excel文件生成图表（柱状图，曲线）。因为我已经知道chart.js这个强大的库，所以我选择使用JavaScript。但是，在使用chart.js之前，我必须从Excel文件中获取数据。那么如何通过JavaScript读取Excel文件呢？

经过一些研究，我成功地在Internet Explorer中使用ActiveX来实现，但我需要它能跨浏览器工作。

1
我认为向他解释如何设置服务器比在JavaScript中完成这项任务更容易。告诉他下载XAMPP，这真的非常简单...或者你可以直接导出为CSV文件。 - elclanrs
在Javascript中做这件事几乎是不可能的。Excel文件非常复杂，从中获取数据并在Excel之外显示将非常复杂。如果客户端机器上有Excel，则可以下载Excel文件并在Excel中打开，然后在Excel中显示图表。 - xxbbcc
Excel 中的图表出了什么问题？除非他们特别要求基于 Web 的图表（如果他们没有 Web 服务器，可能不需要），否则使用 Excel 中的图表会更简单。 - NickSlash
他的问题是他只会使用Excel来输入数据和刷新浏览器，老实说，如果我无法通过Chrome或FF解决这个问题，我将教他如何使用WAMP或XAMPP，然后使用PHP-ExcelReader处理剩下的部分，并向JavaScript客户端发送JSON以准备绘制图表。 - Slifer
4个回答
10

有一些JavaScript库可以让XLS和XLSX文件在纯JavaScript中解析。我在Chrome上测试过（尽管是在Windows上），它能正常工作。

4
这是另一个关于该问题的观点，不必使用JavaScript读取Excel文件，而可以直接使用Funfun Excel插件中的JavaScript。基本上，Funfun是一种工具，允许您在Excel中使用JavaScript，因此您可以使用类似Chart.js的库从电子表格中绘制图表。
基本上，您需要做的是：
1). 从Office Add-ins商店中插入Funfun插件

enter image description here

2). 创建一个新的Funfun或从Funfun在线编辑器中加载示例

enter image description here

3). 在任何其他JavaScript编辑器中一样编写JavaScript代码。在这一步中，为了直接使用电子表格中的数据，您需要编写一些JSON I/O以进行Excel单元格引用。此值所在的位置是Setting-short，但这只需要几行代码。例如，假设我们在电子表格中有以下数据。平均工时在单元格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

在这种情况下，JSON I/O值将是：
{
    "months": "=C6:G6",
    "manager1": "=C7:G7",
    "manager2": "=C8:G8"
}

您可以查看Funfun documentation">文档 获取更多解释。

4). 运行代码以绘制图表

这是我使用JavaScript (Chart.js) 和Excel数据在Funfun在线编辑器上制作的示例图表。 您可以通过以下链接查看它。 您还可以按照第二步中的说明轻松将其加载到Excel中。

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

声明：我是来自Funfun的开发人员。

1

有一个Chart.js插件chartjs-plugin-datasource，可以轻松地从Excel文件中加载数据。

假设您有一个如下所示的Excel文件，并将其保存为mydata.xlsx，与您的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 |
+---------------+---------+----------+-------+-------+------+------+------+

在您的页面中包含Chart.js，SheetJS (js-xlsx)和chartjs-plugin-datasource：
<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>

然后，在你的脚本中指定mydata.xlsx。
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

我认为如果不使用ActiveX，你不能读取Excel文件。我不是说没有ActiveX就不能读取Excel文件，也许有其他方法，但我不知道那种方法。所以，如果你想使用ActiveX来读取文件，这里是你可以用于读取Excel文件的代码。

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

它只能在IE 9及以上版本中运行，并且您必须从设置中激活ActiveX功能。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接