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)