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的更多相关文章

  1. js/ts/tsx读取excel表格中的日期格式转换

    const formatDate = (timestamp: number) => { const time = new Date((timestamp - 1) * 24 * 3600000 ...

  2. excel保存为制表符分隔的文本文件 js无法完整读取

    excel保存为制表符分隔的文本文件 js无法完整读取 excel另存为文本有两个选项,一个是制表符分隔的文本文件,一个是unicode文本.生成的文件Unicode更大一些.但是这里需要注意的是[制 ...

  3. java的poi技术读取Excel[2003-2007,2010]

    这篇blog主要是讲述java中poi读取excel,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为:xls和xlsx. 读取excel和MySQL相关: ja ...

  4. java的poi技术读取Excel数据

    这篇blog主要是讲述java中poi读取excel,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为:xls和xlsx. 读取excel和MySQL相关: ja ...

  5. java的poi技术读取Excel[2003-2007,2010]

    这篇blog主要是讲述java中poi读取excel,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为:xls和xlsx. 读取excel和MySQL相关: ja ...

  6. python接口自动化(三十七)-封装与调用--读取excel 数据(详解)

    简介 在进行软件接口测试或设计自动化测试框架时,一个不比可避免的过程就是: 参数化,在利用python进行自动化测试开发时,通常会使用excel来做数据管理,利用xlrd.xlwt开源包来读写exce ...

  7. node使用xlsx导入导出excel

    1.安装和引入xlsx 安装  npm install xlsx 引入:let xlsx = require('xlsx');2.读取excel数据function readFile(file) {  ...

  8. 关于jquery js读取excel文件内容 xls xlsx格式 纯前端

    附带参考:http://blog.csdn.net/gongzhongnian/article/details/76438555 更详细导入导出:https://www.jianshu.com/p/7 ...

  9. node.js、js读取excel、操作excel、创建excel之js-xlsx.js

    node.js篇 第一步引入包 npm install xlsx -save 第二步使用 var xl =require('xlsx'); //workbook 对象,指的是整份 Excel 文档.我 ...

  10. 实现js读取Excel数据

    如何通过js去读取excel中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

随机推荐

  1. zabbix 4.0 监控 mysql

    zabbix官方支持监控MySQL,但直接使用默认的模板是不可用的,需要经过额外的设置才可以使用.如果只需要对mysql数据库做简单的监控,zabbix自带的模板完全能够满足要求 下面是用zabbix ...

  2. Go 匿名字段介绍

    在 Go 语言中,结构体(struct)是一种用于将多个不同类型的数据组合在一起的数据结构.你提到的语法: type RiderNode struct { service.SimpleService ...

  3. 移除 Parallels Access Sound 虚拟设备

    在安装了 Parallels 之后,发现 Mac 没声音,打开声音设置一看音频输出设备被设为了 Parallels Access Sound.把输出设备调回 MacBook 扬声器就有声音了. 但是音 ...

  4. 【爬虫实战】——利用bs4和sqlalchemy操作mysql数据库,实现网站多行数据表格爬取数据

    前言 此篇接上一篇的内容,在其基础上爬取网站的多行表格数据,以及把数据写入到mysql数据库中 目录 一.定位表格查找元素 二.提取数据 三.写入mysql数据库 四.附录 一.定位表格查找元素 首先 ...

  5. 关于arcmap使用json文件转要素类

    手工编辑了一个json文件,或者在arcgis server下拉取到的json格式文件,通过arcmap进行转换时,出现异常,错误代码001558,此时就是json文件格式不是ansi导致的,用文本编 ...

  6. JVM学习第二篇思考:一个Java代码是怎么运行起来的-下篇

    JVM学习第二篇思考:一个Java代码是怎么运行起来的-下篇 在上一篇<JVM学习第一篇思考:一个Java代码是怎么运行起来的-上篇>中咱们知道类一个Java类的生命周期需要经历以下七个阶 ...

  7. 总结篇3:redis 典型缓存架构设计问题及性能优化

    聊聊对于缓存预热.缓存穿透.缓存雪崩.缓存击穿.缓存更新.缓存降级的定义理解 缓存穿透 定义 当查询Redis中没有的数据时,该查询会下沉到数据库层,同时数据库层也没有该数据,当这种情况大量出现或被恶 ...

  8. C++创建与调用dll动态链接库(MinGW64 Dev-C++)

    本文使用的是dev-c++,如果涉及到VC++中不一样的操作,也会适当进行区分. 项目一:创建DLL 1.创建一个DLL类型的项目,当前命名为dlltest,并选择合适的路径进行保存.  2.在生成的 ...

  9. 超轻量级、支持插件的 .NET 网络通信框架

    前言 给大家推荐一个轻量级的.支持插件的综合网络通信库:TouchSocket. TouchSocket 的基础通信功能包括 TCP.UDP.SSL.RPC 和 HTTP.其中,HTTP 服务器支持 ...

  10. CSS 实现滑动整个元素

    其实没什么难点,主要就是两个CSS属性 scroll-snap-type 这个是作用在包裹容器身上的. scroll-snap-align 这个是作用在被包裹容器身上的. 效果如下图所示: 代码如下: ...