如何使用 JavaScript 读取 Excel 文件(没有 ActiveXObject)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16630413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 05:26:12  来源:igfitidea点击:

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

javascriptexcelchartshighcharts

提问by Slifer

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 powerful chart.js. However before using chart.js, I have to gather data from the Excel file. So how to read an Excel file via JavaScript?

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

After some research I have managed to do this with Internet Explorer with (using ActiveX), but I need it to work across browsers.

经过一番研究,我设法使用 Internet Explorer 和(使用 ActiveX)做到了这一点,但我需要它跨浏览器工作。

回答by Robert MacLean

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

有一些 JavaScript 库允许在纯 JavaScript 中解析XLSXLSX。我用 Chrome(尽管是在 Windows 上)进行了测试,效果很好。

回答by Chuan Qin

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.

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

Basically, what you need to do is

基本上,你需要做的是

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

1)。从 Office 插件商店插入 Funfun 插件

enter image description here

在此处输入图片说明

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

2)。创建新的 Funfun 或从 Funfun 在线编辑器加载示例

enter image description here

在此处输入图片说明

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

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

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

在这种情况下,JSON I/O 值将是:

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

You could check the Funfun documentationfor more explanation.

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

4).Run the code to plot chart

4)。运行代码绘制图表

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.

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

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

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

Disclosure: I'm a developer from Funfun.

披露:我是来自 Funfun 的开发人员。

回答by nagix

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

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

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

假设您有一个如下所示的 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 |
+---------------+---------+----------+-------+-------+------+------+------+

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

在页面中包含 Chart.js、SheetJS (js-xlsx)和 chartjs-plugin-datasource:

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

Then, specify mydata.xlsxin your script.

然后,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'
            }
        }
    }
});

回答by user2529216

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

我认为如果不使用 ActiveX,您将无法读取 excel 文件。这是您可用于读取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>

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

它只能在 IE 9 及更高版本中运行,您必须从设置中激活 activeX 功能..