vue 前端导出表格

最新推荐文章于 2025-05-08 17:20:56 发布

原创最新推荐文章于 2025-05-08 17:20:56 发布 · 280 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue.js #html

本文介绍了如何在Vue组件中使用file-saver和XLSX库，实现在点击按钮后将el-table的数据导出为Excel文件。通过table_to_book、write和saveAs函数，实现了表格数据的格式化保存。

下载插件 npm install --save xlsx file-saver
在需要的组件里引用，当然也可以挂载全局，这里只在一个组件调用

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

组件主要代码

<div >
	<el-button type="primary" plain class="dialogBtn" style="margin-right: 3px;" @click.native="export_excel">导 出
	</el-button>
</div>
<el-table
            id="tabledata"
            :data="tableData"
            border
            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>

data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
export_excel() {
				var wb = XLSX.utils.table_to_book(document.querySelector('#tabledata'))
				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
			},

这样应该能满足导出表格数据