vue+file-saver+xlsx导出table表格为excel

步骤如下:

安装:
npm install file-saver xlsx --save-dev
cnpm install file-saver xlsx --save-dev //淘宝镜像

导入:
import FileSaver from 'file-save';
 
import XLSX from 'xlsx';

一 .在把这个功能封装成一个独立的组件

<template>
    <el-button size="mini" round type="primary" @click="exportExcel">导出Excel</el-button>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  props: {
    id: {
      type: String,
      default: 'Table'
    },
    name: {
      type: String,
      default: 'Table'
    }

  },
  data () {
    return {}
  },
  components: {},
  methods: {
    // 导出Excel表格
    exportExcel () {
      var xlsxParam = { raw: true }
      var wb = XLSX.utils.table_to_book(
        document.querySelector('#' + this.id),
        xlsxParam
      )
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          this.name + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }
  }
}
</script>

二.引用组件

//引入组件
import outTable from '@/components/outTable.vue'

//标签
 <outTable class="outTable" :id="outTableData.id" :name="outTableData.name"></outTable>
//注册组件
export default {
  components: {
    outTable
  },
    data () {
    return {
      outTableData: {
        id: 'outTable',
        name: '交易数据'
      },
    }
  },
  }