AngularJS ui-grid 导入 XLSX 数据的最佳方法 [英] AngularJS ui-grid import XLSX data best approach

问题描述

导入 XLSX 数据以使用 AngularJS ui-grid 显示的最佳方法是什么?

What would be the best approach to import XLSX data to be displayed using an AngularJS ui-grid?

js-xlsx 解析器是否是一个不错的选择，或者是否有其他开源 XLSX 解析器工具更适合此任务?在我的例子中，XLSX 数据是非常基本的，没有什么复杂的，但我想尽可能地保留样式信息.我预计数据网格将少于 20 col x 1000 行.

Is the js-xlsx parser a good choice for this, or are there other open source XLSX parser tools better suited for this task? In my case the XLSX data is very basic, nothing complicated, but I would like to preserve the style info as much as possible. I anticipate the the data grid will be less than 20 col x 1000 rows.

或者使用替代数据网格(例如 Hansontable)而不是 ui-grid 会更好吗?这是否更适合电子表格数据?

Or would it be better to use an alternative data grid, such as the Hansontable, instead of ui-grid? Would that be better suited for spreadsheet data?

推荐答案

使用 js-xlsx 将数据导入网格应该可以正常工作.我已经能够使用我的简单 Open Office 文件让它工作，所以我想你会基本没问题.

Importing data into the grid with js-xlsx should work fine. I've been able to get it working with my simple Open Office files so I would imagine you will be mostly OK.

不过，样式信息是另一个问题.如果您想保持特定于细胞的背景，那可能会更加困难.您能分享一下您想要处理的具体用例吗?

Style info is another question, though. If you're wanting to maintain cell-specific backgrounds and such that could be more difficult. Can you share your specific use case that you want to handle?

对于其他可能感兴趣的人:一旦您将文件读入浏览器并将其转换为工作簿，您就可以使用 XLSX.utils.sheet_to_json() 轻松地将电子表格内容转储到您可以传递到网格中的结构.如果您将 { header: 1 } 作为参数传递给该函数，它将返回一个简单的数据数组数组.如果您有标题行，则数组中的第一个元素将是您的标题行.您可以使用它来创建列定义.

For others who might be interested: once you've read a file into your browser and turned it into a workbook you can use XLSX.utils.sheet_to_json() to easily dump the spreadsheet contents into a structure you can pass into your grid. If you pass { header: 1 } as an argument to that function it will return a simple array-of-arrays of the data. The first element in the array will be your header row if you have one. You can use that to create your column definitions.

如果你想看到一个工作的 plunker，请查看这个:http://plnkr.co/edit/rYC3nd7undqJz2mr8Old?p=preview

If you want to see a working plunker check this one out: http://plnkr.co/edit/rYC3nd7undqJz2mr8Old?p=preview

如果你想要更深入的教程，我有这篇文章解释了 SheetJS 和 plunker 的内容:http://brianhann.com/easily-import-spreadsheets-into-ui-grid/

And if you want a more in-depth tutorial I have this post explaining SheetJS and the contents of the plunker: http://brianhann.com/easily-import-spreadsheets-into-ui-grid/

这篇关于AngularJS ui-grid 导入 XLSX 数据的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！