附带参考:http://blog.csdn.net/gongzhongnian/article/details/76438555

更详细导入导出:https://www.jianshu.com/p/74d405940305

        https://www.jianshu.com/p/044c183edf42

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

在一个项目中需要读取excel的内容,当然excel是有格式的,格式就是读取到的第一行会作为属性(Title)

例如如下excel

Language Detil
en English
cn Chinese
jp Japanese

该excel会解析成:方式1

当然也可以解析成:方式2

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

正文开始:

首先需要引用xlsx.full.min.js 提供链接:https://pan.baidu.com/s/1o7HK6vw

首先页面添加input type=file 来获取文件

<input  type="file" onchange="importExcel(this)" class="filter_input form-control"/>

onchange里面的函数如下:

var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串 function importExcel(obj) {//导入if(obj.files.length==0) {return;
}
const IMPORTFILE_MAXSIZE = 10*1024;//这里可以自定义控制导入文件大小
var suffix = obj.files[0].name.split(".")[1]
$('#_file_path').val(obj.files[0].name);
if(suffix != 'xls' && suffix !='xlsx'){
layer.msg("Only support excel!");
return;
}
if(obj.files[0].size/1024 > IMPORTFILE_MAXSIZE){
layer.msg("The file can not over 10MB");
return;
}
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function(e) {
data = e.target.result;
if(rABS) {
wb = XLSX.read(btoa(fixdata(data)), {//手动转化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
var a=wb.SheetNames[0];
var b=wb.Sheets[a];//内容为方式2
data=XLSX.utils.sheet_to_json(b);//内容为方式1
if(!data||data==""){
layer.closeAll('loading');
layer.msg("The file is empty please choose another file!");
return;
}
     //在这里执行对解析后数据的处理
      //var Compile_Result=Batch_Compile(data);
      //DrawTable(Compile_Result);
    };
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
function fixdata(data) { //文件流转BinaryString
var o = "",
l = 0,
w = 10240;
for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}
}

关于jquery js读取excel文件内容 xls xlsx格式 纯前端的更多相关文章

  1. 使用POI读取excel文件内容

    1.前言 项目中要求读取excel文件内容,并将其转化为xml格式.常见读取excel文档一般使用POI和JExcelAPI这两个工具.这里我们介绍使用POI实现读取excel文档. 2.代码实例: ...

  2. PHP读取Excel文件内容

    PHP读取Excel文件内容   项目需要读取Excel的内容,从百度搜索了下,主要有两个选择,第一个是PHPExcelReader,另外一个是PHPExcel.   PHPExcelReader比较 ...

  3. 手工创建tomcat应用,以及实现js读取本地文件内容

    手工创建tomcat应用: 1.在webapps下面新建应用目录文件夹 2.在文件夹下创建或是从其他应用中复制:META-INF,WEB-INF这两个文件夹, 其中META-INF清空里面,WEB-I ...

  4. java实现读取excel文件内容

    package excel; import java.io.FileInputStream; import java.io.InputStream; import java.text.SimpleDa ...

  5. R读取excel文件乱码 read.xlsx() 解决方法

    1. 参考[R语言]R读取含中文excel文件,read.xlsx乱码问题  该文章总结得很好,可以直接跳到最后看博主的总结. 2. 如果依旧是乱码那么用read.xlsx2()去读取excel文件, ...

  6. Java 读取Excel 文件内容

    在一个项目中,有一个需求,是把excel文件的内容转换为xml格式展示.在学习如何操作的过程中,首先是如何获取excel文件,其中操作的代码如下: 1.首先是导入需要的 jar, 下载地址:https ...

  7. 分别用Java和JS读取Properties文件内容

    项目中经常用到的配置文件,除了XML文件之外,还会用到Properties文件来存储一些信息,例如国际化的设置.jdbc连接信息的配置等.有时候也会把一些路径或者sql语句放到Properties中, ...

  8. java读取excel文件内容

    1.导入依赖JAR包 <!-- jxl 操作excel --> <dependency> <groupId>org.jxls</groupId> < ...

  9. c# 读取 excel文件内容,写入txt文档

    1 winform 读取excel文档 1)点击button按钮,弹出上传excel窗口 private void button_headcompany_Click(object sender, Ev ...

随机推荐

  1. 1-5SpringBoot操作之Spring-Data-Jpa(二)CRUD实现

    本帖来演示下SpringBoot下,实用Spring-Data-Jpa来实现CRUD操作,视图层采用Freemarker 这里我们先把application.properties修改成applicat ...

  2. Paper代写:别让段落结尾拉低你的分数

    为了达到paper写作格式和字数要求,学生往往会在段末做一件事:总结.都不算是一个很长的段落.本来就写不了多少论证的内容,我们还强制加一个总结句,不仅占用了我们论证的篇幅,而且显得多余(段首的主题句已 ...

  3. eot文件

    *.eot文件 是一种压缩字库,目的是解决在网页中嵌入特殊字体的难题2.在网页中嵌入的字体只能是 OpenType 类型,其他类型的字体只有转换成 OpenType 类型(eot格式)的字体才能在网页 ...

  4. CentOS7 环境下 在Hadoop集群安装Hive

    1.下载Hive的tar.gz包:http://mirror.bit.edu.cn/apache/hive/ 2.放入CentOS 7 系统中并解压:tar -zxvf apache-hive-2.3 ...

  5. HDU 1024:Max Sum Plus Plus 经典动态规划之最大M子段和

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  6. 你必须知道的.Net 8.4.4 位枚举

    位标记集合是一种由组合出现的元素形成的列表,通常设计为以“位或”运算组合新值:枚举 类型则通常表达一种语义相对独立的数值集合.而以枚举类型来实现位标记集合是最为完美的组 合,简称为位枚举.在.NET ...

  7. css 让多出的文字成省略号...

    一,单行 white-space:nowrap; overflow:hidden;text-overflow: ellipsis; 二,多行 display: -webkit-box; overflo ...

  8. mitmproxy 配置

    pip install mitmproxy Man In The Middle 原理 mitmproxy工程工具包,主要包含了3个组件 功能一致,交互界面不同 mitmproxy:命令行界面,wind ...

  9. 066、Java面向对象之以分步的方式实例化对象

    01.代码如下: package TIANPAN; class Book { // 定义一个新的类 String title; // 书的名字 double price; // 书的价格 public ...

  10. JuJu团队12月4号工作汇报

    JuJu团队12月4号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 于达 调试 无 无 婷婷 和陈灿一起提升acc 无 无 恩升 纠正chunk evaluator 无 无 ...