javascript - 如何使用 JavaScript（没有 ActiveXObject）读取 Excel 文件

Question

我的朋友让我制作一个简单的应用程序来从 Excel 文件生成图表（条形图、曲线）。我选择使用 JavaScript 作为一门语言，因为我已经知道强大的 chart.js。但是在使用 chart.js 之前，我必须从 Excel 文件中收集数据。那么如何通过 JavaScript 读取 Excel 文件呢？

经过一些研究，我已经设法使用 Internet Explorer 和（使用 ActiveX）来做到这一点，但我需要它在浏览器之间工作。

Answer 1

有一些 JavaScript 库允许在纯 JavaScript 中解析XLS和XLSX 。我用 Chrome 进行了测试（尽管在 Windows 上），它运行良好。

Answer 2

这是关于这个问题的另一种观点，您可以在 Funfun Excel 插件的帮助下直接在 Excel 中使用 JavaScript，而不是使用 JavaScript 读取 Excel 文件。基本上，Funfun 是一个允许您在 Excel 中使用 JavaScript 的工具，因此您可以使用 Chart.js 等库从电子表格中的数据绘制图表。

基本上，你需要做的是

1）。从 Office 加载项商店插入 Funfun 加载项

2）。创建一个新的 Funfun 或从 Funfun 在线编辑器加载样本

3）。像在任何其他 JavaScript 编辑器中一样编写 JavaScrip 代码。在此步骤中，为了直接使用电子表格中的数据，您需要编写一些 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文档以获取更多说明。

4）。运行代码绘制图表

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

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

披露：我是 Funfun 的开发人员。

Answer 3

有一个 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'
            }
        }
    }
});

Answer 4

我认为不使用 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 功能..