AngularJS之前端解析excel文件

之前发现一款比较强大的js解析excel插件SheetJS js-xlsx,一直未投入到生产中使用。最近有批量导入的需求,大致看了下文档,使用比较方便快捷,容易上手,现在以AngularJS为例,介绍下其基本使用:

1、下载核心js文件xlsx.full.min.js,通过script标签引入到项目中

  github地址:https://github.com/sheetjs/js-xlsx

2、编写自定义指令

 1  xxx.directive(‘importSheet‘, function () {
 2     return {
 3       scope: {opts: ‘=‘},
 4       link: function ($scope, $element, $attr) {
 5         /**
 6          * exp:<input type="file" name="uploadExcel" data-sheetname="批量导入" import-sheet multiple="false" />
 7          */
 8         //表格所在sheet页名称
 9         var sheetName = $attr.sheetname;
10         $scope.dataList = [];
11         $element.on(‘change‘, function (changeEvent) {
12           var reader = new FileReader();
13           reader.onload = function (e) {
14             var bstr = e.target.result;
15             var workbook = XLSX.read(bstr, {type: ‘binary‘});
16             console.log(‘workbook‘, workbook)
17             //将原始excel数据解析成json
18             var dataList = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
19             console.log(‘dataList‘, dataList);
20           };
21           reader.readAsBinaryString(changeEvent.target.files[0]);
22         })
23       }
24     }
25   })

3、在页面中使用此自定义指令,导入后的结果如下:

  原始数据:

  json格式的数据:

  

  同时,xlsx自带很多工具方法,可以根据实际业务需求酌情考虑:

  

原文地址:https://www.cnblogs.com/gerry2019/p/10291664.html

时间: 2024-10-08 22:01:14

AngularJS之前端解析excel文件的相关文章

Java通过jxl解析Excel文件入库,及日期格式处理方式 (附源代码)

JAVA可以利用jxl简单快速的读取文件的内容,但是由于版本限制,只能读取97-03  xls格式的Excel. 本文是项目中用到的一个实例,先通过上传xls文件(包含日期),再通过jxl进行读取上传的xls文件(文件格式见下user.xls),解析不为空的行与列,写入数据库. 文件user.xls格式为: 下面来看代码实例演示: 一.前端jsp页面(本来内容很多,这里精简了) <%@ page language="java" contentType="text/htm

解析Excel文件并把数据存入数据库

前段时间做一个小项目,为了同时存储多条数据,其中有一个功能是解析Excel并把其中的数据存入对应数据库中.花了两天时间,不过一天多是因为用了"upload"关键字作为URL从而导致总报同一个错,最后在同学的帮助下顺利解决,下面我把自己用"POI"解析的方法总结出来供大家参考(我用的是SpingMVC和hibernate框架). 1.web.xml中的配置文件 web.xml中的配置文件就按照这种方式写,只需要把"application.xml"换

Apache POI解析Excel文件

1.导入POI的jar包到BOS项目中 2. 使用POI解析Excel文件

Java基础系列19:使用JXL或者POI生成和解析Excel文件

一 简介 如题所示,当我们需要在Java中解析Excel文件时,可以考虑使用JXL或POI的API来解析. 二者的区别如下: jxl现在基本上没被维护了,最近一次更新时间还是几年前.相反,poi属于Apache开源项目的一部分,更新维护得比较好,最新稳定版 POI 3.15 是今年(2016年)9月更新的,同时poi可以支持更高版本的excel,而jxl只能支持excel2003以及之前的版本 小文件使用jxl解析效率比较高,但是因为支持的excel版本的限制,导致不能导出65535以上量级的数

Python解析excel文件并存入sqlite数据库

功能:1.数据库设计 建立数据库2.Python解析excel文件3.Python读取文件名并解析4.将解析的数据存储入库 一 建立数据库 根据需求建立数据库,建立了两个表,并保证了可以将数据存储到已有的数据库中,代码如下: import sqlite3 def createDataBase(): cn = sqlite3.connect('check.db') cn.execute('''CREATE TABLE IF NOT EXISTS TB_CHECK (ID integer PRIMA

PHP-ExcelReader:用于解析excel文件的PHP类库

PHP-ExcelReader是一个基于PHP的开源项目,其作用在于解析excel文件. PHP-ExcelReader的官方网张如下: http://phpexcelreader.sourceforge.net/ 下载下来的文件结构如下图所示: 其中,Excel目录下的两个文件reader.php和oleread.inc是excel解析必须包含的文件,解析所需要的类与方法分别写在这两个文件之中.其它的,example.php和example2.php两个文件是示例程序,jxlwtest.xls

结合项目(Spring+(基于注解的)SpringMVC和Mybatis+uploadify文件上传)--poi解析Excel文件

poi解析Excel文件 1.上传文件至服务器 2.解析Excel文件并返回数据集合 3.将数据保存到服务器 框架======Spring+(基于注解的)SpringMVC和Mybatis===== 第一步: 前台: jsp文件采用的是uploadify <div id="fileQueue"></div> <input type="file" id="brandFile"> js: <script ty

poi解析Excel文件版本问题

poi解析Excel文件时有两种格式: HSSFWorkbook格式用来解析Excel2003(xls)的文件 XSSFWorkbook格式用来解析Excel2007(xlsx)的文件 如果用HSSFWorkbook解析Excel2007(xlsx)时就会报异常:“The supplied data appears to be in the Office 2007+ XML. You are calling the part of POI that deals with OLE2 Office

生成和解析excel文件

package excel; public class BookVO { public String bookName; public String bookAuthor; public String bookPrice; public String bookConcern; public String getBookName() { return bookName; } public void setBookName(String bookName) { this.bookName = boo