vue2.0 + element UI 中 el-table 数据导出Excel 。

vue2.0 + element UI 中 el-table 数据导出Excel

1、 安装相关依赖

主要是两个依赖

npm install --save xlsx file-saver

如果想详细看着两个插件使用，请移步github。

https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js

2、组件里头引入

    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'

3、组件methods里写一个方法

     exportExcel () {
         /* generate workbook object from table */
         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
         /* get binary string as output */
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },

注意：XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 即为导出表格的名字，可修改！

4、点击导出按钮执行 exportExcel 的方法即可 。

组件里头代码截图：

实现效果图如下：
导出如下表格的数据到excel。

导出到excel 表格，结果如下：

相关链接：
该工具的其他使用场景( 如react 、jQ、angular ) http://sheetjs.com/

Js 导出excel （兼容ie9）

需要引入的 相关js 库：

页面上的HTML 的table 元素：

 <div style="display: block">
     <table id="js_table_xlsx">
         <tbody>
         <tr>
             <td><span>Thisspan>td>
             <td><span>isspan>td>
             <td><span>aspan>td>
             <td><span>Testspan>td>
         tr>
         <tr>
             <td><span>வணக்கம்span>td>
             <td><span>สวัสดีspan>td>
             <td><span>你好span>td>
             <td><span>가지마span>td>
         tr>
         <tr>
             <td><span>1233span>td>
             <td><span>2333span>td>
             <td><span>3333span>td>
             <td><span>43333span>td>
         tr>
         tbody>
     table>
 div>
 
 <button class="js_exportExcel">导出excelbutton>

js 事件函数：

  /*
   *   导出 excel 表格 ，利用隐藏的excel
   * */
  $('.js_exportExcel').on('click', function () {
      exportExcel_Doit();
  });
  /*
   *   导出excel function
   * */
  function exportExcel_Doit(type, fn, dl) {
      var elt = document.getElementById('js_table_xlsx');
      var wb = XLSX.utils.table_to_book(elt, {sheet: "Sheet JS"});
      return dl ?
          XLSX.write(wb, {bookType: type, bookSST: true, type: 'base64'}) :
          XLSX.writeFile(wb, fn || ('test.' + (type || 'xlsx')));
  }