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 ...
随机推荐
- 十五分钟两百行代码,手写一个vue项目全局通用的弹框
前言: 我们在写vue项目时,弹框是非常常用的组件,并且在同一个项目中,弹框大多类似.所以我们可以抽离封装出一个通用的弹框: 因为vue3可向下兼容,所以作者这边会使用vue2的写法,vue3写法大同 ...
- 虚拟文件系统VFS-片段一
文件系统类型 基于磁盘的文件系统 如FAT.EXT4 虚拟文件系统 如proc 网络文件系统 顾名思义,网络文件系统还将网络通信封装起来,这意味可以直接通过通信访问另一台设备的文件系统. man fs ...
- 设线性表中每个元素有两个数据项k1和k2,现对线性表按一下规则进行排序:先看数据项k1,k1值小的元素在前,大的在后;在k1值相同的情况下,再看k2,k2值小的在前,大的在后。满足这种要求的
题目: 设线性表中每个元素有两个数据项k1和k2,现对线性表按一下规则进行排序:先看数据项k1,k1值小的元素在前,大的在后:在k1值相同的情况下,再看k2,k2值小的在前,大的在后.满足这种要求的排 ...
- C#设计模式入门实战教程
什么是设计模式 设计模式是对面向对象设计中反复出现的问题的解决方案.它们提供了被反复使用.多数人知晓的.经过分类编目的代码设计经验总结. 设计模式的作用 提高代码的可重用性:通过定义一套标准的解决方案 ...
- ASP.NET Core – Razor Syntax
前言 Full stack 的问题就是经常需要一阵子离开一个环境. 比如我跑去写 Angular 几个月. 回来写 Razor, 肯定是卡卡的. 尤其是一些比较不常用到的语法. 所以有一个很好的笔记就 ...
- Azure 入门系列 (第二篇 Backup 和 Disaster Recovery)
本系列 这个系列会介绍从 0 到 1 搭建一个 Web Application 的 Server. 间中还会带上一些真实开发常用的功能. 一共 6 篇 1. Virtual Machine (VM) ...
- Open Graph protocol
大纲介绍 Open Graph protocol 是 facebook 2010 年推出的一套规范, 用途是通过一些简单的 meta tag 来描述网站的内容. 这样在 sharing 网址的时候就可 ...
- [TK] Blocks 单调栈
题目描述 给出 \(N\) 个正整数 \(a[1..N]\) ,再给出一个正整数 \(k\) ,现在可以进行如下操作:每次选择一个大于 \(k\) 的正整数 \(a[i]\) ,将 \(a[i]\) ...
- Nuxt.js 应用中的 page:finish 钩子详解
title: Nuxt.js 应用中的 page:finish 钩子详解 date: 2024/10/9 updated: 2024/10/9 author: cmdragon excerpt: pa ...
- USB协议基础篇
初次接触USB的同学,可能会被里面各种名词给搞晕,下面就来梳理一下这些知识,希望能帮助大家理解USB. 一,从最常见的名词说起 1.1 什么是USB 这个我就不多解释了,直译就是通用串行总线.再不明白 ...