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

December 17, 2023
测试
测试
测试
测试
3 分钟阅读
  • 第一步: 安装 file-saver 和 xlsx
  cnpm i file-saver xlsx -s
  • 第二步: 在要用的组件用中引入
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
// 为表格绑定一个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>
  • 第三步:书写方法
        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


            },
//  为按钮绑定这个事件就可以了

继续阅读

更多来自我们博客的帖子

如何安装 BuddyPress
由 测试 December 17, 2023
经过差不多一年的开发,BuddyPress 这个基于 WordPress Mu 的 SNS 插件正式版终于发布了。BuddyPress...
阅读更多
Filter如何工作
由 测试 December 17, 2023
在 web.xml...
阅读更多
如何理解CGAffineTransform
由 测试 December 17, 2023
CGAffineTransform A structure for holding an affine transformation matrix. ...
阅读更多