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

问题描述

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

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

js-xlsx解析器是否是一个不错的选择，还是有其他开源XLSX解析器工具更适合此任务?就我而言，XLSX数据非常基础，没有什么复杂的，但是我想尽可能保留样式信息.我预计数据网格将少于20列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.

如果您想查看正在工作的柱塞，请检查以下一项: http://plnkr.co/edit/rYC3nd7undqJz2mr8Old?p =预览

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

如果您需要更深入的教程，我可以在这篇文章中介绍SheetJS和插件的内容:

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