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

解决vue项目中导出当前页表格为Excel表格的方案

用到的技术:

  • Vue2
  • Element-ui
  • file-saver
  • xlsx

1、创建vue项目,安装element-ui

2、创建一个组件,组件内放入表格,和导出按钮

javascript 复制代码
<template>
  <div>
    <!-- 导出的按钮 -->
    <el-button size="small" type="primary" icon="el-icon-download" @click="exportData"
      >导出</el-button
    >
    <!-- 表格数据 -->
    <el-table id="myTable" :data="tableData" style="width: 100%" border>
      <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 弄'
        }
      ]
    }
  },
  methods: {}
    
</script>

<style scoped lang="less"></style>

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

npm install --save xlsx file-saver

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

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

5、编写导出功能

javascript 复制代码
 //导出功能
    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
    }

搞定!!!

完整代码

javascript 复制代码
<template>
  <div>
    <!-- 导出的按钮 -->
    <el-button size="small" type="primary" icon="el-icon-download" @click="exportData"
      >导出</el-button
    >
    <!-- 表格数据 -->
    <el-table id="myTable" :data="tableData" style="width: 100%" border>
      <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 弄'
        }
      ]
    }
  },
  methods: {
    //导出功能
    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
    }
  },
  components: {}
}
</script>

<style scoped lang="less"></style>


相关推荐
栈老师不回家11 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙17 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
小远yyds41 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果1 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长1 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云3 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
GIS程序媛—椰子5 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js