前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端页面单独导出表格里面的数据,格式为xlsx

前端页面单独导出表格里面的数据,格式为xlsx

作者头像
用户4344670
发布2019-08-28 11:13:24
1.3K0
发布2019-08-28 11:13:24
举报
文章被收录于专栏:vue的实战vue的实战
  • 第一步: 安装 file-saver 和 xlsx
代码语言:javascript
复制
  cnpm i file-saver xlsx -s
  • 第二步: 在要用的组件用中引入
代码语言:javascript
复制
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
代码语言:javascript
复制
// 为表格绑定一个id, 特别注意
<el-table
      id="table"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  • 第三步:书写方法
代码语言:javascript
复制
        getcsv() {
                let wb = XLSX.utils.table_to_book(document.querySelector('#table'));
                /* #table 就是表格的id */
                let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'});
                try {
                    FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '导出数据.xlsx');
                } catch (e) {
                    if (typeof console !== 'undefined')
                        console.log(e, wbout)
                }
                return wbout


            },
//  为按钮绑定这个事件就可以了
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.06.04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档