npm install file-save
npm install xlsx
npm install xlsx-style

// 根據(jù)dom導(dǎo)出表格
import { saveAs } from 'file-saver'
import * as XLSX from 'xlsx'
import * as XLSXStyle from "xlsx-style";

function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

export function exportToExcel(idSelector, fileName, titleNum = 1) {
  // 設(shè)置導(dǎo)出的內(nèi)容是否只做解析，不進(jìn)行格式轉(zhuǎn)換     false：要解析， true:不解析
  const xlsxParam = { raw: true }
  let table = document.querySelector(idSelector).cloneNode(true)
  // 因為element-ui的表格的fixed屬性導(dǎo)致多出一個table，會下載重復(fù)內(nèi)容，這里刪除掉
  if (table.querySelector('.el-table__fixed-right')) {
    table.removeChild(table.querySelector('.el-table__fixed-right'))
  }
  if (table.querySelector('.el-table__fixed')) {
    table.removeChild(table.querySelector('.el-table__fixed'))
  }

  const wb = XLSX.utils.table_to_book(table, xlsxParam)
  let range = XLSX.utils.decode_range(wb.Sheets['Sheet1']['!ref'])
  let cWidth = []
  for (let C = range.s.c; C < range.e.c; ++C) {   //SHEET列
    let len = 100 //默認(rèn)列寬
    let len_max = 400 //最大列寬
    for (let R = range.s.r; R <= range.e.r; ++R) {  //SHEET行
      let cell = { c: C, r: R }                    //二維 列行確定一個單元格
      let cell_ref = XLSX.utils.encode_cell(cell)  //單元格 A1、A2
      if (wb.Sheets['Sheet1'][cell_ref]) {
        // if (R == 0){
        if (R < titleNum) {
          wb.Sheets['Sheet1'][cell_ref].s = {  //設(shè)置第一行單元格的樣式 style
            alignment: {
              horizontal: 'center',
              vertical: 'center'
            }
          }
        } else {
          wb.Sheets['Sheet1'][cell_ref].s = {
            alignment: {
              horizontal: 'center',
              vertical: 'center'
            }
          }
        }
        //動態(tài)自適應(yīng)：計算列寬
        let va = JSON.parse(JSON.stringify(wb.Sheets['Sheet1'][cell_ref].v))
        var card1 = JSON.parse(JSON.stringify(va)).match(/[\u4e00-\u9fa5]/g) //匹配中文
        var card11 = ''
        if (card1) {
          card11 = card1.join('')
        }
        var card2 = JSON.parse(JSON.stringify(va)).replace(/([^\u0000-\u00FF])/g, '')  //剔除中文
        let st = 0
        if (card11) {
          // st += card11.length * 16  //中文字節(jié)碼長度
          st += card11.length * 20  //中文字節(jié)碼長度
        }
        if (card2) {
          // st += card2.length * 8  //非中文字節(jié)碼長度
          st += card2.length * 10  //非中文字節(jié)碼長度
        }
        if (st > len) {
          len = st
        }
      }
    }
    if (len > len_max) {//最大寬度
      len = len_max
    }

    cWidth.push({ 'wpx': len })     //列寬
  }
  wb.Sheets['Sheet1']['!cols'] = cWidth
  const wbout = XLSXStyle.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })
  try {
    saveAs(new Blob([s2ab(wbout)], { type: '' }), `${fileName}.xlsx`)
  } catch (e) {
    if (typeof console !== 'undefined') {
      console.log(e, wbout)
    }
  }
  return wbout
}

<template>
    <div>
      <el-table  id='table'>
        //形式一
        <el-table-column>
         <template>
           <span>可以用插槽形式</span>
         </template>
        </el-table-column>
     
        //形式二
        <el-table-column lable=可以用這種形式' prop='xxx'/>
     
        //形式三（不可用）
        <el-table-column>
          <template>
            <el-input  v-model=''/>//該方式無法識別到
          </template>
        </el-table-column>

     </el-table>//給表格一個id
      <el-button @click='demo'>導(dǎo)出</el-button>
    </div>
</template>

<script>
import { exportToExcel } from '@/Export2Excel'

export default{
  data(){
    return{}
 },
  methods:{
      demo(){
        exportToExcel('#table', '導(dǎo)出名稱')//id選擇器,導(dǎo)出名稱,調(diào)用這個方法就可以了
      }
  }
}
</script>

  //在這個方法里面
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [
      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解壓縮靜態(tài)文件
      new CompressionPlugin({
        cache: false,                   // 不啟用文件緩存
        test: /\.(js|css|html)?$/i,     // 壓縮文件格式
        filename: '[path].gz[query]',   // 壓縮后的文件名
        algorithm: 'gzip',              // 使用gzip壓縮
        minRatio: 0.8                   // 壓縮率小于1才會壓縮
      })
    ],


    //加入這三行
    externals: [{
      './cptable': 'var cptable'
    }]



  },

<span v-if="index===0">{{scope.row.xxxx}}</span>//如果是第一行就顯示值
<span v-else></span>//如果不是就為空