唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > vue2.0 + element UI 中 el-table 数据导出Excel

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

2018-11-13 分类：Vue.js专区 作者：管理员 阅读（3018）

今天帮一个同学看了下他做的个项目，发现有个一键“导出excel”功能，然后陷入无限的回忆遐想，因为在上家公司也是见过的，只是那时候用的bootstrap别人都弄好的插件，平时用到的不多就没怎么关注，现在很多项目用vue开发，就特意去看了下。

1、 安装相关依赖

  • 主要是两个依赖
    • 1
    npm install --save xlsx file-saver
  • 如果想详细看着两个插件使用，请移步github。
    • 1
    2
    https://github.com/SheetJS/js-xlsx
    https://github.com/eligrey/FileSaver.js

    2、组件里头引入

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

    3、组件methods里写一个方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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 库：
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!--  ECMAScript 5 兼容性  -->
    <script type="text/javascript" src="https://unpkg.com/xlsx/dist/shim.min.js"></script>
    <script type="text/vbscript" language="vbscript">
    IE_GetProfileAndPath_Key = "HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\User Shell Folders"
    Function IE_GetProfileAndPath(key): Set wshell = CreateObject("WScript.Shell"): IE_GetProfileAndPath = wshell.RegRead(IE_GetProfileAndPath_Key & key): IE_GetProfileAndPath = wshell.ExpandEnvironmentStrings("%USERPROFILE%") & "!" & IE_GetProfileAndPath: End Function
    Function IE_SaveFile_Impl(FileName, payload): Dim data, plen, i, bit: data = CStr(payload): plen = Len(data): Set fso = CreateObject("Scripting.FileSystemObject"): fso.CreateTextFile FileName, True: Set f = fso.GetFile(FileName): Set stream = f.OpenAsTextStream(2, 0): For i = 1 To plen Step 3: bit = Mid(data, i, 2): stream.write Chr(CLng("&h" & bit)): Next: stream.Close: IE_SaveFile_Impl = True: End Function
    </script>
    <script type="text/vbscript" language="vbscript">
    Function IE_LoadFile_Impl(FileName): Dim out(), plen, i, cc: Set fso = CreateObject("Scripting.FileSystemObject"): Set f = fso.GetFile(FileName): Set stream = f.OpenAsTextStream(1, 0): plen = f.Size: ReDim out(plen): For i = 1 To plen Step 1: cc = Hex(Asc(stream.read(1))): If Len(cc) < 2 Then: cc = "0" & cc: End If: out(i) = cc: Next: IE_LoadFile_Impl = Join(out,""): End Function
    </script>
    <script type="text/javascript" src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/blob.js@1.0.1/Blob.js"></script>
    <script type="text/javascript" src="https://unpkg.com/file-saver@1.3.3/FileSaver.js"></script>
  • 页面上的HTML 的table 元素：
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <div style="display: block">
         <table id="js_table_xlsx">
             <tbody>
             <tr>
                 <td><span>This</span></td>
                 <td><span>is</span></td>
                 <td><span>a</span></td>
                 <td><span>Test</span></td>
             </tr>
             <tr>
                 <td><span>வணக்கம்</span></td>
                 <td><span>สวัสดี</span></td>
                 <td><span>你好</span></td>
                 <td><span>가지마</span></td>
             </tr>
             <tr>
                 <td><span>1233</span></td>
                 <td><span>2333</span></td>
                 <td><span>3333</span></td>
                 <td><span>43333</span></td>
             </tr>
             </tbody>
         </table>
     </div>
     <!-- 导出excel -->
     <button class="js_exportExcel">导出excel</button>
  • js 事件函数：
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
      /*
       *   导出 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')));
      }

    「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

    赞(6) 打赏

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    赏 6

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    标签：

    上一篇：

    下一篇：

    你可能感兴趣

    共有 0 条评论 - vue2.0 + element UI 中 el-table 数据导出Excel

    博客简介

    唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与 

    最近更新

    随机文章

    热门标签

    caniuse兼容性 阿里CDN CDN大全 博主Github 百度统计 百度收录 关键词排名 经典css片段 时间戳格式化 全国黑企名单 武汉黑企名单 996.ICU火了 Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试 前端面试100问 Vue.js200问 Node.js上线

    精彩评论

    友情链接

    他们同样是一群网虫，却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步，但同学却不局限在一国一校，而是遍及全球！申请交换友链

    站点统计

    • 文章总数： 231 篇
    • 草稿数目： 0 篇
    • 分类数目： 14 个
    • 独立页面： 6 个
    • 评论总数： 846 条
    • 链接总数： 12 个
    • 标签总数： 416 个
    • 建站时间： 980 天
    • 注册用户： 1856 人
    • 访问总量： 8652662 次
    • 最近更新： 2019年8月22日
    服务热线：
     173xxxx7240

     QQ在线交流

    点击这里给我发消息
    点击这里给我发消息

     旺旺在线

    点击这里给我发消息
    点击这里给我发消息