附带参考: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. Python 动态从文件中导入类或函数的方法

    假设模块文件名是data_used_to_test.py,放在tests文件夹下 文件夹结构如下: project |-tests |-data_used_to_test.py 文件内包含一个test ...

  2. Day3:关于地形生成

    ---恢复内容开始--- 今天桃子好像还是没什么动静,不过媳妇倒是有一点见红~ 希望这是马上要出来的前兆了~ 桃子都已经晃点我俩好多回了~ 已经都快习惯来她这个狼来了的征兆了~ ----------- ...

  3. 使用elk+redis搭建nginx日志分析平台(引)

    http://www.cnblogs.com/yjf512/p/4199105.html elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎 ...

  4. 关于ESP8266和ESP8285的对比

    ESP8285=ESP8266+1M Flash. 与ESP8266相比,其能耐高温达125摄氏度!且原有ESP8266源码程序可以原封不动移植使用.ESP-M1/M2 模块核心处理器采用高性价比芯片 ...

  5. 使用gulp 进行ES6开发

    使用gulp 进行ES6开发 一.新建项目 项目结构如下: /app -- /js -- /css /dist -- /js -- /css -- index.html gulpfile.js 我们的 ...

  6. 微信小程序循环中点击一个元素,其他的元素不发生变化,类似点击一个循环中的语音,其他的不发生点击事件

    类似语音,因为都在一个数据内,所以点击第一个,所有的语音都变化,解决方法就是 把整个数据都获取下来,然后更改其中一个需要更改的值,然后再把整个数据都setdata回去,如果需要动画的话,wxml里面放 ...

  7. python matplotlib绘图大全(散点图、柱状图、饼图、极坐标图、热量图、三维图以及热图)

    //2019.7.14晚matplotlib七种常见图像输出编程大全 七种图形汇总输出如下: import numpy as np #导入数据结构nmupy模块import matplotlib.py ...

  8. Java 日期与时间

    章节 Java 基础 Java 简介 Java 环境搭建 Java 基本语法 Java 注释 Java 变量 Java 数据类型 Java 字符串 Java 类型转换 Java 运算符 Java 字符 ...

  9. idea基于springboot搭建ssm(maven)

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/liboyang71/article/det ...

  10. SQL语句中为什么要用 where 1=1

    where 1=1; 这个条件始终为True,在不定数量查询条件情况下,1=1可以很方便的规范语句,1=1 是永恒成立的,意思无条件的,也就是说在SQL语句中有没有这个1=1都可以. 如:web界面查 ...