js-xlsx 前段读取excel
JavaScript读取和导出excel示例(基于js-xlsx)
放入参考链接 http://demo.haoji.me/2017/02/08-js-xlsx/
github官网 https://github.com/SheetJS/sheetjs
需要引入js
直接上代码
<a class="btn btn-info" onclick="selectFile()">
<input type="file" id="file" style="display:none;" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
<i class="fa fa-plus"></i> <@ctx.i18n text = "导入Excel"/>
</a>
此代码段是有关 读取xls的所有函数
function selectFile() {
document.getElementById('file').click();
}
// 读取本地excel文件
function readWorkbookFromLocalFile(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
if(callback) callback(workbook);
};
reader.readAsBinaryString(file);
}
function readWorkbook(workbook) {
var sheetNames = workbook.SheetNames; // 工作表名称集合
var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
var csv = XLSX.utils.sheet_to_csv(worksheet);
csv2table(csv);
}
// 将csv转换成表格
function csv2table(csv)
{
var rows = csv.split('\n');
rows.shift();
rows.pop();
rows.forEach(function(row, idx) {
var count = $("#bootstrap-table").bootstrapTable('getData').length;
var columns = row.split(',');
var rowinfo = {
index:count+1
,invCode: columns[0]
,invName: columns[1]
,number: columns[3]
,unites: columns[5]
,singlePrice: 0
,size: columns[2]
,material: columns[4]
,remark: ""
};
$("#bootstrap-table").bootstrapTable('append', rowinfo)
});
}
$(function() {
document.getElementById('file').addEventListener('change', function(e) {
var files = e.target.files;
if(files.length == 0) return;
var f = files[0];
if(!/\.xlsx$/g.test(f.name)) {
alert('仅支持读取xlsx格式!');
return;
}
readWorkbookFromLocalFile(f, function(workbook) {
readWorkbook(workbook);
});
});
});
js-xlsx 前段读取excel的更多相关文章
- js/ts/tsx读取excel表格中的日期格式转换
const formatDate = (timestamp: number) => { const time = new Date((timestamp - 1) * 24 * 3600000 ...
- excel保存为制表符分隔的文本文件 js无法完整读取
excel保存为制表符分隔的文本文件 js无法完整读取 excel另存为文本有两个选项,一个是制表符分隔的文本文件,一个是unicode文本.生成的文件Unicode更大一些.但是这里需要注意的是[制 ...
- java的poi技术读取Excel[2003-2007,2010]
这篇blog主要是讲述java中poi读取excel,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为:xls和xlsx. 读取excel和MySQL相关: ja ...
- java的poi技术读取Excel数据
这篇blog主要是讲述java中poi读取excel,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为:xls和xlsx. 读取excel和MySQL相关: ja ...
- java的poi技术读取Excel[2003-2007,2010]
这篇blog主要是讲述java中poi读取excel,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为:xls和xlsx. 读取excel和MySQL相关: ja ...
- python接口自动化(三十七)-封装与调用--读取excel 数据(详解)
简介 在进行软件接口测试或设计自动化测试框架时,一个不比可避免的过程就是: 参数化,在利用python进行自动化测试开发时,通常会使用excel来做数据管理,利用xlrd.xlwt开源包来读写exce ...
- node使用xlsx导入导出excel
1.安装和引入xlsx 安装 npm install xlsx 引入:let xlsx = require('xlsx');2.读取excel数据function readFile(file) { ...
- 关于jquery js读取excel文件内容 xls xlsx格式 纯前端
附带参考:http://blog.csdn.net/gongzhongnian/article/details/76438555 更详细导入导出:https://www.jianshu.com/p/7 ...
- node.js、js读取excel、操作excel、创建excel之js-xlsx.js
node.js篇 第一步引入包 npm install xlsx -save 第二步使用 var xl =require('xlsx'); //workbook 对象,指的是整份 Excel 文档.我 ...
- 实现js读取Excel数据
如何通过js去读取excel中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
随机推荐
- zabbix 4.0 监控 mysql
zabbix官方支持监控MySQL,但直接使用默认的模板是不可用的,需要经过额外的设置才可以使用.如果只需要对mysql数据库做简单的监控,zabbix自带的模板完全能够满足要求 下面是用zabbix ...
- Go 匿名字段介绍
在 Go 语言中,结构体(struct)是一种用于将多个不同类型的数据组合在一起的数据结构.你提到的语法: type RiderNode struct { service.SimpleService ...
- 移除 Parallels Access Sound 虚拟设备
在安装了 Parallels 之后,发现 Mac 没声音,打开声音设置一看音频输出设备被设为了 Parallels Access Sound.把输出设备调回 MacBook 扬声器就有声音了. 但是音 ...
- 【爬虫实战】——利用bs4和sqlalchemy操作mysql数据库,实现网站多行数据表格爬取数据
前言 此篇接上一篇的内容,在其基础上爬取网站的多行表格数据,以及把数据写入到mysql数据库中 目录 一.定位表格查找元素 二.提取数据 三.写入mysql数据库 四.附录 一.定位表格查找元素 首先 ...
- 关于arcmap使用json文件转要素类
手工编辑了一个json文件,或者在arcgis server下拉取到的json格式文件,通过arcmap进行转换时,出现异常,错误代码001558,此时就是json文件格式不是ansi导致的,用文本编 ...
- JVM学习第二篇思考:一个Java代码是怎么运行起来的-下篇
JVM学习第二篇思考:一个Java代码是怎么运行起来的-下篇 在上一篇<JVM学习第一篇思考:一个Java代码是怎么运行起来的-上篇>中咱们知道类一个Java类的生命周期需要经历以下七个阶 ...
- 总结篇3:redis 典型缓存架构设计问题及性能优化
聊聊对于缓存预热.缓存穿透.缓存雪崩.缓存击穿.缓存更新.缓存降级的定义理解 缓存穿透 定义 当查询Redis中没有的数据时,该查询会下沉到数据库层,同时数据库层也没有该数据,当这种情况大量出现或被恶 ...
- C++创建与调用dll动态链接库(MinGW64 Dev-C++)
本文使用的是dev-c++,如果涉及到VC++中不一样的操作,也会适当进行区分. 项目一:创建DLL 1.创建一个DLL类型的项目,当前命名为dlltest,并选择合适的路径进行保存. 2.在生成的 ...
- 超轻量级、支持插件的 .NET 网络通信框架
前言 给大家推荐一个轻量级的.支持插件的综合网络通信库:TouchSocket. TouchSocket 的基础通信功能包括 TCP.UDP.SSL.RPC 和 HTTP.其中,HTTP 服务器支持 ...
- CSS 实现滑动整个元素
其实没什么难点,主要就是两个CSS属性 scroll-snap-type 这个是作用在包裹容器身上的. scroll-snap-align 这个是作用在被包裹容器身上的. 效果如下图所示: 代码如下: ...