element-ui 导出excel

element-ui 导出excel

项目简介

vue + elementUi

插件使用

Project	Description
file-saver	保存文件
xlsx	电子表格解析器

安装

    npm install file-saver xlsx --save 
    or 
    yarn add file-saver xlsx

使用(以el-table示例)

// table给定id
<el-table :data="tableData" size="medium" id="table-data"></el-table>

// 引入插件
import fileSaver from 'file-saver'
import xlsx from 'xlsx'

// methods新增方法 exportTable
exportTable(){
 let box = xlsx.utils.table_to_book(document.querySelector('#table-data'))
 let out = xlsx.write(box, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
 try {
  fileSaver.saveAs(
    new Blob([out], {
      type: 'application/octet-stream'
    }),
    'sheet.xlsx'
  )
 } catch (e) {
   // 错误处理方式
 }
 return out
}


// 新增点击事件（exportTable） 浏览器会下载excel

问题

• 导出时间格式转换

  • 解决方案:

    • let xlsxParam = { raw: true };
    • let wb = xlsx.utils.table_to_book(dom, xlsxParam)