前端导出excel

需要用到的插件：xlsx    npm install xlsx-S

第三方ui库：element ui  npm i element-ui -S

在main.js 引入 element ui 

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

下面的代码示例

<template>
  <div id="app">
    <div>
      <el-button @click="exportExcel">导出excel</el-button>
    </div>
    <div style="width:50%; margin:0 auto">
      <el-table
      class="multipleTable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
      fixed
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
    fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column label="地址">
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="120">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
    </div>
    
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import * as XLSX from 'xlsx'
import { tableArr } from '@/type/table'
export default Vue.extend({
  name: 'App',
  data() {
    return {
      tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },],
        multipleSelection: tableArr()
    }
  },
   methods: {
      handleSelectionChange(val:any) {
        this.multipleSelection = val;
      },
      exportExcel() {
        if(this.multipleSelection.length <= 0) {
           this.$message({
            message: '还没选择要导出excel的数据噢',
            type: 'warning'
          })
          return
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        let arr = this.multipleSelection.map(item => {
          return {
            日期: item.date,
            姓名: item.name,
            省份:item.province,
            地区:item.city,
            地址: item.address,
            邮编: item.zip.toString()
          }
        })
        let wscols = [
        { wch: 15 },
        { wch: 20 },
        { wch: 15 },
        { wch: 15 },
        { wch: 35 },
        { wch: 15 },
      ]
        let sheet = XLSX.utils.json_to_sheet(arr)
        // let sheet = XLSX.utils.table_to_sheet(document.querySelector('.multipleTable')) 
        // sheet['!merges'] = [ {s: {r: 0, c: 2}, e: {r: 0, c: 4}} ]  //设置合并列
        sheet['!cols'] = wscols  //设置列宽
        let book = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(book, sheet, "sheet1")
        XLSX.writeFile(book, `testExcel.xls`)
        loading.close()
      },
    }
});
</script>

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

 

/type/table 里面的代码

export type tableObj = {
    name: string,
    date: string,
    address: string,
    province: string,
    city:string,
    zip:string
}

export const tableArr = ():Array<tableObj> => {
    return []
}