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

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

2018-11-13 分类:Vue.js专区 作者:管理员 阅读(6388)

今天帮一个同学看了下他做的个项目,发现有个一键“导出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 表格,结果如下:

如何通过接口请求导出?

1
2
3
4
5
6
7
exportExcel() {
  var _data = [['序号', '性别', '年龄'], [1, '男', 17], [2, '女', 24]];
  var worksheet = XLSX.utils.aoa_to_sheet(_data);
  var new_workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(new_workbook, worksheet, 'SheetJS');
  XLSX.writeFile(new_workbook, '日志测试查询' + '.xlsx');
}

相关链接:

该工具的其他使用场景( 如react 、jQ、angular ) https://github.com/SheetJS/sheetjs

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')));
  }

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

赞(8) 打赏

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

支付宝
微信
8

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

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

0 条评论关于"vue2.0 + element UI 中 el-table 数据导出Excel"

博客简介

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

精彩评论

  • 江吟辞(1周前 (06-29))

    好难坚持啊,我还没毕业,不知道啥时候才能像您一样厉害

    评:碎言碎语
  • 和我、恋爱吧(1周前 (06-29))

    怎么没见你更新呢,比较忙吗

    评:碎言碎语
  • 游离(1周前 (06-29))

    站主,你好!请教一下,前台的pc 端和移动端,你是怎么实现响应式的呢?媒体查询的同时写两套样...

    评:碎言碎语
  • 권지용(1周前 (06-29))

    最近在学习前端,看了博主很多文章,收益匪浅,感谢大佬

    评:碎言碎语
  • 白君也(1周前 (06-28))

    哇 自己制作的吗 在哪学的技术啊 好厉害

    评:碎言碎语
  • 管理员(3周前 (06-16))

    时间区间问题,因为目前是2020年,你所选不可能超出这个时间吧,当然,代码是根据你的业务来,...

    评:js时间戳完美转换成阴历农历格式

友情链接

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

站点统计

  • 文章总数: 258 篇
  • 草稿数目: 0 篇
  • 分类数目: 16 个
  • 独立页面: 6 个
  • 评论总数: 902 条
  • 链接总数: 17 个
  • 标签总数: 459 个
  • 注册用户: 8220 人
  • 访问总量: 9212007 次
  • 最近更新: 2020年7月3日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线