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

 

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

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

 

首先安装dqPlugin

npm install dqplugin -save

 

然后是导出Excel功能

import dqPlugin from 'dqplugin'

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

dqPlugin.exportExcel(list,'订单.xlsx')

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

 

然后是导入Excel功能

import dqPlugin from 'dqplugin'

// 上传钩子
beforeUpload( file ) {
  dqPlugin.readXlsxFile(file).then(workbook => {
    let sheet = workbook.Sheets[workbook.SheetNames[0]]
    for ( let key in sheet ) {
      sheet[key].v ? console.log(sheet[key].v) : null
    }
  })
}

首先获取上传的file文件。然后调用readXlsxFile方法，把file文件和回调函数都传进去。

如果你使用ElementUI，在ElementUI的 Upload组件 中有上传钩子，勾住这个beforeUpload方法即可。

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

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

 

 

欢迎转载！