2023.9.1今天我學(xué)習(xí)了如何使用el-table實(shí)現(xiàn)前端的導(dǎo)出功能，該方法的好處有無論你的el-table長什么樣子，導(dǎo)出之后就是什么樣子。

1.安裝三個(gè)插件

npm install file-save

npm install xlsx

npm install xlsx-style

2.創(chuàng)建Export2Excel.js

// 根據(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)
  // 因?yàn)閑lement-ui的表格的fixed屬性導(dǎo)致多出一個(gè)table，會(huì)下載重復(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 }                    //二維 列行確定一個(gè)單元格
      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'
            }
          }
        }
        //動(dòng)態(tài)自適應(yīng)：計(jì)算列寬
        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
}

3.按需引入

<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=''/>//該方式無法識(shí)別到
          </template>
        </el-table-column>

     </el-table>//給表格一個(gè)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)用這個(gè)方法就可以了
      }
  }
}
</script>

4.vue.config.js引入

  //在這個(gè)方法里面
  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才會(huì)壓縮
      })
    ],


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



  },

效果：

擴(kuò)展：

當(dāng)我們會(huì)出現(xiàn)這樣的表格需求時(shí)，如果只是用v-if判斷，導(dǎo)出來會(huì)全部也有，因?yàn)槲覀冎蛔隽藇-if的判斷

實(shí)現(xiàn)代碼如下：

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

這樣就可以防止只需要第一個(gè)行數(shù)據(jù)的時(shí)候其他還會(huì)顯示的問題。文章來源地址http://www.zghlxwxcb.cn/news/detail-688406.html

到了這里，關(guān)于el-table實(shí)現(xiàn)純前端導(dǎo)出（適用于el-table任意表格）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！