vue中导出表格数据

项目中使用了 element-UI ,需要导出表格中的数据,主要用到了两个依赖:xlsx ,file-saver 。
相关git : https://github.com/SheetJS/js-xlsx,https://github.com/eligrey/FileSaver.js

  1. 安装依赖
npm install --save xlsx file-saver
  1. 组件中引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
  1. 添加一个方法
exportExcel () {
      //在导出的过程中发现数字的格式发生了变化,可以通过添加参数解决 
      var xlsxParam = { raw: true };//转换成excel时,使用原始的格式
     // 需要导出的table的DOM节点 
     var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'), xlsxParam)
     var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
     try {
    // sheetjs 导出的文件名,可以根据需要修改
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
  } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },
  1. 执行方法就可以得到表格对应的数据。

你可能感兴趣的:(vue中导出表格数据)