angular-xlsx 解析excel文件

前言：做项目中，一需求为上传excel文件，上传前判断文件中的表头字段为固定字段不能变，固需要解析excel文件。项目采用的是angular开发，经查阅资料可使用xlsx插件解决。

在使用xlsx插件前，就遇到下载xlsx插件报错问题，查阅资料，总结方法如下。

npm install xlsx --save

npm ERR! path E:\project\myGo\src\git.changhong.com\matrix\matrix-admin\node_modules\.node-sass.DELETE\vendor\win32-x64-57\binding.node
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink 'E:\project\myGo\src\git.changhong.com\matrix\matrix-admin\node_modules\.node-sass.DELETE\vendor\win32-x64-57\binding.node'
npm ERR!  { Error: EPERM: operation not permitted, unlink 'E:\project\myGo\src\git.changhong.com\matrix\matrix-admin\node_modules\.node-sass.DELETE\vendor\win32-x64-57\binding.node'
npm ERR!   cause:
npm ERR!    { Error: EPERM: operation not permitted, unlink 'E:\project\myGo\src\git.changhong.com\matrix\matrix-admin\node_modules\.node-sass.DELETE\vendor\win32-x64-57\binding.node'
npm ERR!      errno: -4048,
npm ERR!      code: 'EPERM',
npm ERR!      syscall: 'unlink',
npm ERR!      path: 'E:\\project\\myGo\\src\\git.changhong.com\\matrix\\matrix-admin\\node_modules\\.node-sass.DELETE\\vendor\\win32-x64-57\\binding.node' },
npm ERR!   stack: 'Error: EPERM: operation not permitted, unlink \'E:\\project\\myGo\\src\\git.changhong.com\\matrix\\matrix-admin\\node_modules\\.node-sass.DELETE\\vendor\\win32-x64-57\\binding.node\'',
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'unlink',
npm ERR!   path: 'E:\\project\\myGo\\src\\git.changhong.com\\matrix\\matrix-admin\\node_modules\\.node-sass.DELETE\\vendor\\win32-x64-57\\binding.node',
npm ERR!   parent: 'matrix-admin' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\asus\AppData\Roaming\npm-cache\_logs\2019-06-27T08_48_19_621Z-debug.log

解决办法：
1.看到operation not permitted我们能想到权限问题，以管理员身份运行cmd（针对本次无用，大家可以下去试试有用没）
2.npm版本问题，npm最新版本在安装包时有些缺少依赖包，这种情况就需要我们安装低一点的npm版本，命令npm i -g npm@6.3.0（可用）

现在进入正题，angular使用xlsx解析excel文件：
上传组件我使用的是ng.ant的upload

    <nz-upload [(nzFileList)]="fileList" [nzLimit]='1' [nzMultiple]="true" [nzBeforeUpload]="beforeUpload">
      <button nz-button>
        <i nz-icon nzType="upload"></i>
        <span>选择文件</span>
      </button>
    </nz-upload>

ts文件中引入import * as XLSX from 'xlsx'；
beforeUpload 为上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。

import * as XLSX from 'xlsx';
beforeUpload = (file): boolean => {
    if (file) {
      const fileName = file.name;//获取文件名
      const reader: FileReader = new FileReader();//FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件
      //当读取操作成功完成时调用FileReader.onload 
      reader.onload = (e: any) => {
        const bstr: string = e.target.result;
        const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });      
        const wsname: string = wb.SheetNames[0];
        const ws: XLSX.WorkSheet = wb.Sheets[wsname];   
        this.importUserList = XLSX.utils.sheet_to_json(ws, { header: 1 });//解析出文件数据，可以进行后面操作
        this.importUserHeader =  this.importUserList[0];//获得表头字段
        this.fileList = this.fileList.concat(file);
      };
      reader.readAsBinaryString( file );
      return false;
    }
  }

angular-xlsx 解析excel文件

推荐阅读更多精彩内容