vue项目中Table 表格导出为Excel表格

一.创建vue项目

1.新建文件夹，在vs-code中打开

2.Ctrl + j 打开控制台

3.控制台输入以下命令，创建名为my_table的vue项目

vue create my_table

4.（用空格健和方向键进行选择）

        (1)Manually select features

        (2)          

                Router

                Css Pre-processors

        (3)2.x

        (4)n

        (5)Less

        (6) In dedicated config files

        (7)n

5.

（1）进入创建的vue项目

cd my_table

(2) 启动项目

npm run serve

（3）按住Ctrl键点击 http://localhost:8080/

（4）如图所示启动成功

二.安装Element-ui

1.关闭vs-code，找到原来的新建文件夹打开，把文件夹里的my_table文件拖动到vs-code重新打开

2.控制台输入

npm i element-ui -S

3.等待package.json中显示element-ui

4.在 src的main.js 中写入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

三.整理HelloWorld页面，使用Element-ui引入table表格和导出按钮

 

<template>
  <div>
    <!-- 导出的按钮 -->
    <el-button size="small" type="primary" icon="el-icon-download" @click="exportData">导出</el-button>
	
	<!-- table表格 -->
    <el-table id="Table" :data="tableData" style="width: 80%">
      <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>
  </div>
</template>

<script>
export default {
  props: {

  },
  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 弄'
      }]
    };
  },
  created() {

  },
  methods: {

  },
  components: {

  },
};
</script>

<style scoped lang="less">
#Table {
  margin: 0 auto;
  ;
}
</style>

 

 

四.安装导出表格需要的插件【xlsx 和 file-saver】

1.控制台输入

（1）Ctrl + c 终止上次控制台操作

（2）输入命令

npm install --save xlsx file-saver

2.等待安装成功

 

 3.在main.js中引入安装的依赖

// 引入导出excel的插件
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
Vue.prototype.$FileSaver = FileSaver; //设置全局
Vue.prototype.$XLSX = XLSX; //设置全局

五.在HelloWorld页面编写导出功能

（注意选中el-table的id名称，与上面保持一致）  

//导出功能
    exportData() {
      let excelName = '导出表格名称.xlsx'
      var xlsxParam = { raw: true } //转换成excel时，使用原始的格式
      // 克隆节点
      let tables = document.getElementById('Table').cloneNode(true)
      // 判断是否为固定列，解决（为固定列时，会重复生成表格）
      if (tables.querySelector('.el-table__fixed') !== null) {
        tables.removeChild(tables.querySelector('.el-table__fixed'))
      }
      let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam)
      var table_write = this.$XLSX.write(table_book, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        this.$FileSaver.saveAs(
          new Blob([table_write], { type: 'application/octet-stream' }),
          excelName
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, table_write)
      }
      return table_write
    }

 点击导出

 

六.完整代码

<template>
  <div>
    <!-- 导出的按钮 -->
    <el-button size="small" type="primary" icon="el-icon-download" @click="exportData">导出</el-button>

    <el-table id="Table" :data="tableData" style="width: 80%">
      <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>
  </div>
</template>

<script>
export default {
  props: {

  },
  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 弄'
      }]
    };
  },
  created() {

  },
  methods: {
    //导出功能
    exportData() {
      let excelName = '导出表格名称.xlsx'
      var xlsxParam = { raw: true } //转换成excel时，使用原始的格式
      // 克隆节点
      let tables = document.getElementById('Table').cloneNode(true)
      // 判断是否为固定列，解决（为固定列时，会重复生成表格）
      if (tables.querySelector('.el-table__fixed') !== null) {
        tables.removeChild(tables.querySelector('.el-table__fixed'))
      }
      let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam)
      var table_write = this.$XLSX.write(table_book, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        this.$FileSaver.saveAs(
          new Blob([table_write], { type: 'application/octet-stream' }),
          excelName
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, table_write)
      }
      return table_write
    }
  },
  components: {

  },
};
</script>

<style scoped lang="less">
#Table {
  margin: 0 auto;
  ;
}
</style>