el-table导出为excel表格----vue2.0

原创

已于 2024-08-20 16:28:38 修改 · 531 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#excel #elementui #vue

于 2024-07-29 20:11:11 首次发布

1、安装依赖

npm install xlsx@^0.16.0 --registry=https://registry.npmmirror.com   
npm install file-saver --registry=https://registry.npmmirror.com

2、在main.js文件中全局配置

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

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

Vue.config.productionTip = false

Vue.prototype.$FileSaver = FileSaver; 
Vue.prototype.$XLSX = XLSX;

Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app')

3、template代码

<template>
  <div>
    <el-button type="primary" @click="outExcel">导出excel</el-button>
    <el-table :data="tableData" border style="width: 100%" id="table_excel">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column pro