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. 如何将png转为svg

    如何将png转为svg如图所示. 工具/原料 Inkscape 方法/步骤 1 打开Inkscape,"文件-打开"如图. 2  打开你需要转化的png图片.如图所示. 3 打开你 ...

  2. java_类属性&对象属性

    访问类属性方式有两种: 对象.类属性 类.类属性 但是理解上第一种方法存在小小小问题, 逻辑没问题 2022年7月31日18:44:29

  3. WinForm 使用委托动态更新数据

    使用委托动态更新数据 详细代码 // 声明一个委托,用于更新消息的文本提示 private delegate void UpdateMsgTextDelegate(string text); // 定 ...

  4. 痞子衡嵌入式:在MDK开发环境下自定义安装与切换不同编译器版本的方法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是在MDK开发环境下自定义安装与切换不同编译器版本的方法. Keil MDK 想必是嵌入式开发者最熟悉的工具之一了,自 2005 年 Ar ...

  5. Vert.x HttpClient调用后端服务时使用Idle Timeout和KeepAlive Timeout的行为分析

    其实网上有大量讨论HTTP长连接的文章,而且Idle Timeout和KeepAlive Timeout都是HTTP协议上的事情,跟Vert.x本身没有太大关系,只不过最近在项目上遇到了一些问题,用到 ...

  6. DNN、CNN、RNN的区别

    参考1:CNN.RNN.DNN区别 参考2:一文读懂 CNN.DNN.RNN 内部网络结构区别 一张图解释所有: 感知机(输入层.输出层.一个隐藏层)-->不能解决复杂的函数-->神经网络 ...

  7. TypeScript 5.1 & 5.2

    getter 和 setter 可以完全不同类型了 以前我们提过,getter 的类型至少要是其中一个 setter 的类型.这个限制被突破了.现在可以完全使用不同类型了. v5.1 后,没有再报错了 ...

  8. 我发布了一款相亲平台《i相遇》

    因缘际会之下,我踏入了相亲平台的领域.起初,是为一位客户打造专属相亲应用,过程中深入体验了众多同类平台,却遗憾地发现它们普遍掺杂着欺诈的阴影--高昂的费用.兼职托儿的身影.以及虚假的钓鱼信息,不一而足 ...

  9. 【赵渝强老师】HBase的体系架构

    一.什么是HBase? HBase是一个基于HDFS之上的分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文"BigTable大表",即:把所 ...

  10. 《Vue.js 设计与实现》读书笔记 - 第10章、双端 Diff 算法

    第10章.双端 Diff 算法 10.1 双端比较的原理 上一章的移动算法并不是最优的,比如我们把 ABC 移动为 CAB,如下 A C B --> A C B 按照上一章的算法,我们遍历新的数 ...