vue+element-ui的table数据导出到excel中

最新推荐文章于 2025-07-07 14:44:26 发布

呼啦啦画酱

最新推荐文章于 2025-07-07 14:44:26 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：总结文章标签： element-ui table excel vue

本文链接：https://blog.youkuaiyun.com/qq_42484025/article/details/88734763

总结专栏收录该内容

23 篇文章

订阅专栏

该博客介绍了在Vue项目中导出Table为Excel的方法。开发环境为Golang和Vue，需先安装xlsx和file - saver插件，接着在项目中引入插件，在方法里定义事件处理函数，最后在HTML中设置触发按钮并绑定table对象即可完成导出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发环境：golang vue
第一步；安装2个插件，运行npm install xlsx npm install file-saver
第二步：项目中引进插件（组件中引入）

<script>
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
</script>

第三部：方法中定义事件处理函数，#out-table为绑定table的id，run_rank.xlsx为导出的excel的文件名称

//导出到excel   
        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' }), 'run_rank.xlsx')
            } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
            return wbout
        },

第四部：html中设置触发按钮，绑定table对象

    <!--查询按钮-->
              <el-button type="success" style=" margin-right: 3%; float: right;" @click="exportExcel">导出到Excel</el-button>
          。。。。。。。
              <el-table id="out-table" :data="print_data" style="width: 97%" @current-change="handleCurrentChange">

搞定