下载功能

1下载封装组件

安装:
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: '交易数据'
      },
    }
  },
  }

2页面单独引入

 exportExcel_lis() {
      // 设置当前日期
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let name = year + "" + month + "" + day;

      /* generate workbook object from table */
      //  .table要导出的是哪一个表格
      var wb = XLSX.utils.table_to_book(document.querySelector(".data"));
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        //  name+'.xlsx'表示导出的excel表格名字
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          name + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
     turnToRequestPageTwo(row, column, cell, event){

      this.$router.push({name:'scoreFile',params: { id:row.id  }}) 
    },
  },

引入
import FileSaver from “file-saver”;
import XLSX from “xlsx”;
参考地址：https://blog.csdn.net/wjswangjinsheng/article/details/91393396