解决vue项目导出当前页Table为Excel

1.创建vue项目
2.使用element-ui来创建表格

 <p style="width: 80%; margin: 20px auto;">
      <el-button type="primary" icon="el-icon-download" @click="exportData">导出当页</el-button>
      <!-- 导入全部比较好用的办法是再写一个表格 -->
      <el-button type="primary" icon="el-icon-download" @click="exportData1">导出全部</el-button>
    </p>
    <template>
      <el-table id="myTable" :data="medicineList" border style="width: 80%; margin: auto;"
        :header-cell-style="{ backgroundColor: 'rgba(19, 185, 201, 0.5)' }">
        <el-table-column prop="title" label="药名" width="180">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="180">
        </el-table-column>
        <el-table-column prop="sale_price" label="原价">
        </el-table-column>
        <el-table-column prop="market_price" label="活动价">
        </el-table-column>
        <el-table-column prop="company" label="生产厂家">
        </el-table-column>
      </el-table>
    </template>

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

npm install --save xlsx file-saver

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

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

5.编写导出当前页功能

 //导出功能
    exportData() {
    	//根据需要定义导出的文件名
      let excelName = '导出表格名称.xlsx'
      var xlsxParam = { raw: true } //转换成excel时，使用原始的格式
      // 克隆节点   //通过id绑定表格  使用代码的时候只需要修改一下此处的id  
      let tables = document.getElementById('myTable').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
    }

6.导出效果

7.完整代码

<template>
  <div>
    <h1>home</h1>
    <p style="width: 80%; margin: 20px auto;">
      <el-button type="primary" icon="el-icon-download" @click="exportData">导出当页</el-button>
      <!-- 导入全部比较好用的办法是再写一个表格 -->
      <el-button type="primary" icon="el-icon-download" @click="exportData1">导出全部</el-button>
    </p>
    <template>
      <el-table id="myTable" :data="medicineList" border style="width: 80%; margin: auto;"
        :header-cell-style="{ backgroundColor: 'rgba(19, 185, 201, 0.5)' }">
        <el-table-column prop="title" label="药名" width="180">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="180">
        </el-table-column>
        <el-table-column prop="sale_price" label="原价">
        </el-table-column>
        <el-table-column prop="market_price" label="活动价">
        </el-table-column>
        <el-table-column prop="company" label="生产厂家">
        </el-table-column>
      </el-table>
    </template>
    <!-- 25710 -->
    <!-- 分页器 -->
    <el-pagination style="width: 80%;margin:20px auto;" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="medicineInfo.pno" :page-sizes="[2, 5, 7, 10]"
      :page-size="medicineInfo.count" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!--  -->
    <div class="box" v-show="false">
      <!-- <router-link to="/home/all">all</router-link> -->
      <router-view></router-view>
    </div>


  </div>
</template>

<script>
export default {
  props: {

  },
  data() {
    return {
      medicineList: [],
      medicineInfo: {
        pno: 1,
        count: 5
      },
      total: 0

    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 请求数据
    async getData() {
      let { data: res } = await this.axios.get('/medicine/list', {
        params: this.medicineInfo
      })
      this.medicineList = res.data
      this.total = res.total
    },
    handleCurrentChange(newPage) {
      this.medicineInfo.pno = newPage;
      this.getData()
    },
    handleSizeChange(newSize) {
      this.medicineInfo.count = newSize;
      this.getData()
    },
    // 下载表格的代码
    //导出功能
    exportData() {
      let excelName = '导出表格名称.xlsx'
      var xlsxParam = { raw: true } //转换成excel时，使用原始的格式
      // 克隆节点
      let tables = document.getElementById('myTable').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
    },
    // 下载全部数据
    exportData1() {
      let excelName = '导出表格名称.xlsx'
      var xlsxParam = { raw: true } //转换成excel时，使用原始的格式
      // 克隆节点
      let tables = document.getElementById('myTable1').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"></style>

7.导出全部按钮，可以再创建一个组件，显示全部数据的表格 ，然后隐藏，当然要注意不要使用相同的名字，否则页面会显示不出来