前端导入Excel和导出Excel（基于Vue）

 

        前端导出EXCEL有优势也有劣势，优势就是更加灵活，可自定义。劣势就是，如果数据很多的话（超过10万条）就会导致浏览器卡住啦，一直到解析完成开始下载文件的时候才结束卡顿。

了解了优劣势之后，下面一起看看怎么导入/导出吧！

 

首先安装XLSX

npm install xlsx -save

 

然后是导出Excel功能

import exportExcel from './xlsx.js'

let json = [
 {
   '订单号' :123,
   '订单金额' :'15元',
   '数量' :'3',
 },{
   '订单号' :456,
   '订单金额' :'8元',
   '数量' :'28',
 }
]

exportExcel(json,'订单.xlsx')

只要调exportExcel方法，并把json数据传输进去， 浏览器就自动下载啦。

现在你调还没用，因为这个exportExcel方法还不存在，你跳到文章结尾“最后是引入文件”那里接着看吧。

 

然后是导入Excel功能

import { readWorkbookFromLocalFile } from './xlsx.js'

// 上传钩子
beforeUpload( file ) {
  readWorkbookFromLocalFile( file, this.readWorkbook )
}

// 读取并格式化返回的JSON数据
readWorkbook(workbook) {
  let sheet = workbook.Sheets[workbook.SheetNames[0]]
  for ( let key in sheet ) {
    sheet[key].v ? console.log(sheet[key].v) : null
  }
}

在ElementUI的 Upload组件 中有上传钩子，勾住这个beforeUpload方法，获取上传的file文件。

然后调用readWorkbookFromLocalFile方法，把file文件和回调函数都传进去。

现在你调还没用，因为这个readWorkbookFromLocalFile方法还不存在，这个一会儿再说。

然后在回调函数（异步的哦）中，格式化解析出来的JSON数据，大功告成。

其中 sheet[key].v 是指原始数据值。

 

最后是引入文件

刚才那两个方法都不存在，不过我已经都写好啦，放在这里了，自己拿。

https://github.com/dq77/static-resource/blob/master/xlsx.js

欢迎转载！