纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
本文实例讲述了纯JS实现的读取excel文件内容功能。分享给大家供大家参考，具体如下：
template.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS-XLSX Live Demo</title>
<link href="../css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<style>
#drop{
border:2px dashed #bbb;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:25px;
text-align:center;
font:20pt bold,"Vollkorn";color:#bbb
}
#b64data{
width:100%;
}
a { text-decoration: none }
button{}
</style>
</head>
<body>
<pre>
<input type="file" name="xlfile" id="xlf">
<button type="button" class="btn btn-danger"><a href="Techrecord.html" rel="external nofollow" rel="external nofollow" >返回</a></button>
<input type="checkbox" name="useworker" checked="" style="display: none;">
<input type="checkbox" name="xferable" checked="" style="display: none;">
<input type="checkbox" name="userabs" checked="" style="display: none;">
</pre>
<button class="submit_all">提交</button>
<pre id="out"></pre>
<br>
<script src="../js/jquery.js"></script>
<script src="../js/common.js"></script>//这里主要封装了一下方法，可以忽略，主要使用到以下几个js
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="../js/shim.js"></script>
<script src="../js/xlsx.full.min.js"></script>
<script src='../js/myexcel.js'></script>
</body>
</html>
myexcel.js
/*jshint browser:true */
/*global XLSX */
var X = XLSX;
var XW = {
/* worker message */
msg: 'xlsx',
/* worker scripts */
rABS: '../js/xlsxworker2.js',
norABS: '../js/xlsxworker1.js',
noxfer: '../js/xlsxworker.js'
};
function ab2str(data) {
var o = "", l = 0, w = 10240;
for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint16Array(data.slice(l*w,l*w+w)));
o+=String.fromCharCode.apply(null, new Uint16Array(data.slice(l*w)));
return o;
}
function s2ab(s) {
var b = new ArrayBuffer(s.length*2), v = new Uint16Array(b);
for (var i=0; i != s.length; ++i) v[i] = s.charCodeAt(i);
return [v, b];
}
function xw_xfer(data, cb) {
var worker = new Worker(rABS ? XW.rABS : XW.norABS);
worker.onmessage = function(e) {
switch(e.data.t) {
case 'ready': break;
case 'e': console.error(e.data.d); break;
default: xx=ab2str(e.data).replace(/\n/g,"\\n").replace(/\r/g,"\\r");cb(JSON.parse(xx)); break;
}
};
if(rABS) {
var val = s2ab(data);
worker.postMessage(val[1], [val[1]]);
} else {
worker.postMessage(data, [data]);
}
}
function xw(data, cb) {
transferable = document.getElementsByName("xferable")[0].checked;
if(transferable) xw_xfer(data, cb);
else xw_noxfer(data, cb);
}
function get_radio_value( radioName ) {
var radios = document.getElementsByName( radioName );
for( var i = 0; i < radios.length; i++ ) {
if( radios[i].checked || radios.length === 1 ) {
return radios[i].value;
}
}
}
function to_json(workbook) {
var result = {};
workbook.SheetNames.forEach(function(sheetName) {
var roa = X.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
if(roa.length > 0){
result[sheetName] = roa;
}
});
return result;
}
var tarea = document.getElementById('b64data');
function b64it() {
if(typeof console !== 'undefined') console.log("onload", new Date());
var wb = X.read(tarea.value, {type: 'base64',WTF:wtf_mode});
process_wb(wb);
}
var token=Cookies.get("token");
console.log(token);
if(token==null){
// alert("你是怎么进来的？请先登录");
// window.location.href="../login.html" rel="external nofollow" ;
}
var global_wb;
function process_wb(wb) {
global_wb = wb;
var output = "";
//这里是成绩批量录入代码，可以忽略不计
$(".submit_all").on("click",function(){
var array=Object.values(to_json(wb))[0];
var len=array.length;
var array1="",array2="",array3="",array4="",array5="";
for(var i=0;i<len;i++){
array1+=array[i].学号+",";
array2+=array[i].成绩+",";
array3+=array[i].总分+",";
array4+=array[i].时间+",";
array5+=array[i].评语+",";
}
array1=array1.substring(0,array1.length-1);
array2=array2.substring(0,array2.length-1);
array3=array3.substring(0,array3.length-1);
array4=array4.substring(0,array4.length-1);
array5=array5.substring(0,array5.length-1);
console.log(array1);
var url='grade/addall';
var params={
"token":token,
"gradeUserId":array1,
"gradeCourse":array2,
"gradeRank":array3,
"gradeRemark":array5,
"gradeTime":array4
};
pullData(url,params,function(res){
if(res.state==0){
alert("成绩录入成功！");
window.location.href="Techrecord.html" rel="external nofollow" rel="external nofollow" ;
}
else if(res.state==1){
alert("您输入的学号不存在");
}
});
})
output = JSON.stringify(to_json(wb), 2, 2);
if(out.innerText === undefined) out.textContent = output;
else out.innerText = output;
if(typeof console !== 'undefined') console.log(output);
}
function setfmt() {if(global_wb) process_wb(global_wb);}
var xlf = document.getElementById('xlf');
function handleFile(e) {
rABS = document.getElementsByName("userabs")[0].checked;
use_worker = document.getElementsByName("useworker")[0].checked;
var files = e.target.files;
var f = files[0];
{
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
if(typeof console !== 'undefined')
var data = e.target.result;
if(use_worker) {
xw(data, process_wb);
} else {
var wb;
if(rABS) {
wb = X.read(data, {type: 'binary'});
} else {
var arr = fixdata(data);
wb = X.read(btoa(arr), {type: 'base64'});
}
process_wb(wb);
}
};
if(rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
}
}
if(xlf.addEventListener) xlf.addEventListener('change', handleFile, false);
导入一个新建的excel
查看读取到的值，以json格式显示
给大家一个GitHub插件包下载地址： https://github.com/SheetJS/js-xlsx
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript文件与目录操作技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
js读取本地excel文档数据的代码
复制代码 代码如下: <script> function readThis(){ var tempStr = ""; var filePath= document.all.upfile.value; var oXL = new ActiveXObject("Excel.application"); var oWB = oXL.Workbooks.open(filePath); oWB.worksheets(1).select(); var oSheet
-
JS Excel读取和写入操作（模板操作）实现代码
本人是在实际项目中摸索出,JS读写Excel(模板)数据,包括怎么用JS把图片插入Excel中.首先,添加一个公用的模板地址JS,如下: AddZDaddress.js 复制代码 代码如下: /////////////////////////////////////////////////////////////////////////////////////////////////// ////DocName:信任站点地址添加--AddZDaddress.js ////Author:lify
-
JS兼容浏览器的导出Excel（CSV）文件的方法
Js导出表格为Excel文件 的常见一种办法是调用:ActiveXObject("Excel.Application") ,但是这种方法有局限性,只能在IE系列下的浏览器里实现,兼容性方面不理想. 经测试,采用本文推荐的方法能兼容性较好的导出表格内容到Excel文件. 复制代码 代码如下: var str = "博客, 域名\nBlog, 2\njb51.net, 3";var uri = 'data:text/csv;charset=utf-8,' + str;
-
原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f
-
js基于FileSaver.js 浏览器导出Excel文件的示例
本文介绍了js基于FileSaver.js 浏览器导出Excel文件,分享给大家,也给自己做个笔记 限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自FileSaver.js): Browser Constructs as Filenames Max Blob Size Dependencies Firefox 20+ Blob Yes 800 MiB None Firefox < 20 data: URI No n/a Blob.js Chrome Blob Yes
-
js导出excel文件的简洁方法(推荐)
用js可以直接在jsp页面导出数据到excel文件,方法很简洁,如下: 第一,准备一个jsp(暂时取名为export.jsp),内容为: <%@ page contentType="text/html; charset=GBK"%> <% String context = request.getParameter("sContent"); response.setHeader("Content-type","appli
-
通过Javascript读取本地Excel文件内容的代码示例
读取本地Excel文件内容的Javascript代码: 复制代码 代码如下: <script type="text/javascript">function read_excel(){ var filePath="D:\abcd9.com.xls"; //要读取的xls var sheet_id=2; //读取第2个表 var row_start=3; //从第3行开始读取 var tempStr=''; try{
-
可以读取EXCEL文件的js代码第1/2页
首页给个有中文说明的例子,下面的例子很多大家可以多测试. 复制代码 代码如下: <script language="javascript" type="text/javascript"><!-- function readExcel() { var excelApp; var excelWorkBook; var excelSheet; try{ excelApp = new ActiveXObject("Excel.Applicatio
-
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
本文实例讲述了纯JS实现的读取excel文件内容功能.分享给大家供大家参考,具体如下: template.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JS-XLSX Live Demo</title> <link href="../css/boots
-
JS实现读取Excel文件内容并生成二维码
目录 需求 实现方案 puppeteer node-canvas 浏览器 问题分解 具体实现 启动一个本地服务器 创建html,引入资源库 解析xls文件 写入中间logo 写入底部文字 canvas转化为图片,并下载到本地 递归调用 最终效果 需求 一次普通的技术需求会议 项目经理首先发言 我们技术这边需要将xls表格中的几千条数据变成二维码,并且中间镶嵌logo,图片底部放置编号,由于xls表格数据私密,不能通过第三方完成 平常这个事情都是后端处理的,前端就是来摸鱼的,但是这次一反常
-
js使用xlsx读取excel文件的详细步骤
目录 下载安装插件 文件基础 获取文件对象 读取文件数据 读取Excel 通过xlsx获取workbook WorkBook介绍 读取WorkBook 导出Excel 生成sheet 总结 下载安装插件 npm install xlsx or yarn add xlsx 此时,在项目的node_modules文件夹和package.json文件中可以找到xlsx依赖. 文件基础 获取文件对象 我比较推荐使用h5的原生文件上传项 <input type="file" id=&quo
-
解决springboot 多线程使用MultipartFile读取excel文件内容报错问题
springboot项目开启多线程 启动类加注解开启 @EnableAsync,实现类方法加注解 @Async 前端页面 报错信息 java.io.FileNotFoundException: C:\Users\dongao\AppData\Local\Temp\tomcat.1255209411477782290.8051\work\Tomcat\localhost\ROOT\upload_7d7b99e5_38da_4a03_93e0_bff20cb48022_00000000.tmp (系
-
Java读取Excel文件内容的简单实例
借助于apathe的poi.jar,由于上传文件不支持.jar所以请下载后将文件改为.jar,在应用程序中添加poi.jar包,并将需要读取的excel文件放入根目录即可 本例使用java来读取excel的内容并展出出结果,代码如下: 复制代码 代码如下: import java.io.BufferedInputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundExceptio
-
纯js实现的积木(div层)拖动功能示例
本文实例讲述了纯js实现的积木(div层)拖动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖动</title> <style type="text/css"> </style> </head> <bo
-
如何利用js读取excel文件并绘制echarts图形
目录 1.场景描述 2.需求描述 3.功能实现 4.尾言 1.场景描述 通常来说,前端要拿到excel数据,都是先上传存储数据库,然后再请求后端接口,获取数据. 但有100个产品经理,就会有101个不同的需求. 本文以自己的vue项目为例. 2.需求描述 现有一张excel财务报表,需要根据这张excel表绘制成各种echarts图形,用于年度汇报. 不经过后端,前端独立完成. 3.功能实现 首先,为了将excel数据绘制成echarts图表,前端得拿到excel数据. 这里我们借助js-xls
-
php生成与读取excel文件
在网站中经常会生成表格,CSV和Excel都是常用的报表格式,CSV相对来说比较简单,如果大家有疑问我会相继发布一些CSV的实例,这里主要介绍用PHP来生成和读取Excel文件. 要执行下面的函数,首先要引入一个类库:PHPExcel,PHPExcel是一个强大的PHP类库,用来读写不同的文件格式,比如说Excel 2007,PDF格式,HTML格式等等,这个类库是建立在Microsoft's OpenXML和PHP 的基础上的,对Excel提供的强大的支持,比如设置工作薄,字体样式,图片以及边
-
pandas 读取excel文件的操作代码
目录 一 read_excel() 的基本用法 二 read_excel() 的常用的参数: 三 示例 1. IO:路径 2. sheet_name:指定工作表名 3. header :指定标题行 4. names: 指定列名 5. index_col: 指定列索引 6. skiprows:跳过指定行数的数据 7. skipfooter:省略从尾部的行数据 8.dtype 指定某些列的数据类型 一 read_excel() 的基本用法 import pandas as pd file_name