js使用xlsx读取excel文件的详细步骤

2024-04-02 19:04:59 396人浏览泡泡鱼

摘要

目录下载安装插件文件基础获取文件对象读取文件数据读取excel通过xlsx获取workbookWorkBook介绍读取WorkBook导出Excel生成sheet总结下载安装插件 n

下载安装插件

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对象数组添加到现有工作表中