下载安装插件

npm install xlsx
or
yarn add xlsx

此时,在项目的node_modules文件夹和package.json文件中可以找到xlsx依赖。

文件基础

获取文件对象

我比较推荐使用h5的原生文件上传项

<input type="file" id="uploadExcel" multiple />

其中multiple属性允许上传多个文件,通过Ctrl按键来实现。

在选择文件的过程中,触发事件的流程是下面这样的:

  • mousedown
  • focus
  • mouseup
  • click
  • blur
  • focus
  • change

首先触发的是鼠标按下事件,然后就是焦点到了input上面,然后鼠标抬起事件,触发click事件,失去焦点以后弹出文件选择框,选中文件以后触发焦点,最后触发change事件。

所以监听input的文件内容变更事件的话,我推荐用change事件去监听。

添加事件监听:

window.document.getElementdById("uploadExcel").addEventListener("change", function(e){
    let fileList = e.target.files;
})

其中,打印fileList信息,可以发现fileList是一个类数组,由传入的file对象组成。每个file对象包含一下属性:

lastModified

Number

表示最近一次的修改时间的时间戳

lastModeifiedDate

Object

表示最后一次修改时间的Date对象,可以在其中调用Date对象的有关方法。

name

文件上传时的文件名

size

文件的字节大小

type

String

文件的MIME类型

weblitRelativePath

当在input上添加webkitdirectory属性时,可选文件夹,此时weblitRelativePath表示文件夹中文件的相对路径。未加时为空

读取文件数据

首先创建一个FileReader实例:

let reader = new FileReader();

FileReader提供了如下方法:

readAsArrayBuffer(file)

将文件读取为ArrayBuffer对象

readAsDataURL(file)

将文件读取为DataURL,因此可以读取图片。

readAsText(file, encoding)

将文件读取为文本,第二个参数是文本的编码方式,默认为utf-8

abort()

终止文件读取操作

注:无论读取成功或失败,方法并不会返回读取结果,这一结果存储都在result属性中。

FileReader事件:

onabort

当读取操作被终止时调用

onerror

当读取操作发生错误时调用

onload

当读取操作成功完成时调用

onloaded

当读取操作完成时调用,无论成功或失败

onloadstart

当读取操作开始时调用

onprogress

在读取数据过程中周期性调用

我们使用readAsDataURL(file)来读取文件数据,并使用onload事件来输出读取成功后result中的数据:

reader.onload = function(e){
    let data = e.target.result;
};
reader.readAsDataURL(file);

读取Excel

通过xlsx获取workbook

读取excel主要是通过以下语句实现:

XLSX.read(data, { type: type });

返回一个叫WordBook的对象。

其中,这里type的类型要与处理文件时读的data一致,FileReader方法对应的type取值如下:

base64

以base64方法读取

binary

BinatyString格式(byte n is data.charCodeAt (n))

string

UTF-8编码的字符串

buffer

nodejs Buffer

array

Uint8Array,8位无符号数组

file

文件的路径(仅nodejs下支持)

所以,全部代码如下:

let wb;  // 读取完成的数据
let rABS = false; // 是否将文件读取为二进制字符串
document.getElementById("excel").addEventListener("change",function (e) {
  if(!e.target.files) return;
  var f = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    var data = e.target.result;
      if(rABS) {
        wb = XLSX.read(btoa(fixdata(data)), {type: 'base64'});//手动转化
      } 
      else {
       wb = XLSX.read(data, {type: 'binary'});
      }
      //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
      //wb.Sheets[Sheet名]获取第一个Sheet的数据
    document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
  };
  if(rABS) {reader.readAsArrayBuffer(f);} 
  else {reader.readAsBinaryString(f);}
  });
      
function fixdata(data) { //文件流转BinaryString
  var o = "",
  l = 0,
  w = 10240;
  for(; l < data.byteLength / w;   l) 
    o  = String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w   w)));
    o  = String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
  return o;
}

WorkBook介绍

SheetNames保存了所有Sheet的名字

Sheets保存了每个Sheet的具体内容

Sheet Object

每个sheet Object表示一张表格,通过类似A1这样的键值保存每个单元格的内容。只要不是"!"开头的都表示普通的cell。特殊cell有:

sheet['!ref']

表示所有单元格的范围,例如A1到F8则记录为A1: F8

sheet[!merges]

存放单元格合并信息,是一个数组。每个数组由包含s和e构成的对象组成。s表示start,e表示end,r表示row,c表示col。

例如:

sheet1:{
    !merge: [
    {
        e: { c: 5, r: 0 },
      s: { c: 0, r: 0 }  // 表示A1到F1单元格合并
    },
    {
        e: { c: 5, r: 9 },
      s: { c: 0, r: 9 }  // 表示A10到F10单元格合并
    }
  ]
}

Cell Object

t

内容类型

s

String

n

Number

b

Boolean

d

Date

v

原始值

 

 

f

公式

如:B2 B3

h

HTML内容

 

 

w

格式化后的内容

 

 

r

富文本内容

 

 

......

 

 

读取WorkBook

普通方法:

// 读取 excel文件
function outputWorkbook(workbook) {    
  var sheetNames = workbook.SheetNames; // 工作表名称集合
  sheetNames.forEach(name => {        
    var worksheet = Workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
    for(var key in worksheet) {            // v是读取单元格的原始值
        console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
    }
   });
}

根据!ref确定excel的范围,再根据!merges确定单元格合并,最后输出整个table。插件zi'shen已经写好工具类XLSX.utils给我们用:

sheet_to_html

转csv会忽略格式、单元格合并等信息

sheet_to_txt

 

sheet_to_csv

会保留单元格合并,但是生成的是HTML代码,不是<table>

sheet_to_json

 

sheet_to_formulae

 

导出Excel

生成sheet

aoa_to_sheet

将一个二维数组转成sheet

json_to_sheet

将由对象组成的数组转化成sheet

table_to_sheet

将table的dom直接转成sheet

sheet_add_aoa

将二维数组添加到现有工作表中

sheet_add_json

将js对象数组添加到现有工作表中

  • format_cell 生成单元格的文本值(使用数字格式)
  • encode_row / decode_row 在0索引行和1索引行之间转换
  • encode_col / decode_col 在0索引的列和列名之间转换
  • encode_cell / decode_cell 转换单元格地址
  • encode_range / decode_range 转换单元格范围

总结

到此这篇关于js使用xlsx读取excel文件的文章就介绍到这了,更多相关js用xlsx读取excel内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

js使用xlsx读取excel文件的详细步骤的更多相关文章

  1. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. swift皮筋弹动发射飞机ios源码

    这是一个款采用swift实现的皮筋弹动发射飞机游戏源码,游戏源码比较详细,大家可以研究学习一下吧。

  4. Swift与Js通过WebView交互

    开发环境:Swfit2.3XCode8.2基础概念jscontext,jscontext是代表JS的执行环境,通过-evaluateScript:方法就可以执行一JS代码JSValue,JSValue封装了JS与ObjC中的对应的类型,以及调用JS的API等JSExport,JSExport是一个协议,遵守此协议,就可以定义我们自己的协议,在协议中声明的API都会在JS中暴露出来,才能调用Swif

  5. JSCore swift

    如果双方相互引用,会造成循环引用,而导致内存泄露。以上是Jscore的基本使用,比较简单

  6. Swift WKWebView的js调用swift

    最近项目需求,需要用到JavaScriptCore和WebKit,但是网上的资源有限,而且比较杂,都是一个博客复制另外一个博客,都没有去实际敲代码验证,下面给大家分享一下我的学习过程。

  7. Swift WKWebView的swift调用js

    不多说,直接上代码:在html里面要添加的的代码,显示swift传过去的参数:这样就实现了swift给js传参数和调用!

  8. 在 Swift 專案中使用 Javascript:編寫一個將 Markdown 轉為 HTML 的編輯器

    你有強烈的好奇心,希望在你的iOS專案中使用JavaScript。jscontext中的所有值都是JSValue對象,JSValue類用於表示任意類型的JavaScript值。因此,我們既需要寫Swift代碼也要寫JavaScript代碼。此外,我們還會在JavaScript中按照這個類的定義來創建一個對象并對其屬性進行賦值。從Swift中呼叫JavaScript就如介紹中所言,JavaScriptCore中最主要的角色就是jscontext類。一個jscontext對象是位於JavaScript環境和本

  9. swift - WKWebView JS 交互

    本文介绍WKWebView怎么与js交互,至于怎么用WKWebView这里就不介绍了HTML代码APP调JS代码结果JS给APP传参数首先注册你需要监听的js方法名2.继承WKScriptMessageHandler并重写userContentController方法,在该方法里接收JS传来的参数3.结果

  10. swift 开发UIWebView跟JS的交互

    前言作为小白的我,才开始入门IOS,选择了swift来进行入门学习,学习做着公司一个简单的小小项目,该项目需要进行跟H5进行交互,然后我就开始研究了UIWebView的使用,其实基本原理跟Android的一样,因为我是Android开发的,所以就顺水推舟了。))//这里设置你需要加载的地址}overridefuncdidReceiveMemoryWarning(){super.didReceiveMemoryWarning()//disposeofanyresourcesthatcanberecreate

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部