美文网首页大前端开发
angular-xlsx 解析excel文件

angular-xlsx 解析excel文件

作者: ZhangYu31 | 来源:发表于2019-07-08 17:55 被阅读3次

    前言:做项目中,一需求为上传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文件

        本文链接:https://www.haomeiwen.com/subject/oporcctx.html