关于项目中的导出

HTML部分

<el-button type="primary" @click="exprot" size="mini">导出</el-button>

<!-- 导出表格 -->
     <div class="tableWrap" id="contractList" style="display: none">
      <table>
        <tr>
          <th colspan="7">合同存档</th>
        </tr>
        <tr>
          <th v-for="i in tableTitle" :key="i.tleId">{{ i.projectName }}</th>
        </tr>
        <tr v-for="item in tableData1" :key="item.historySettlementId">
          <td>{{ item.contractNumber}}</td>
          <td>{{ item.projectName }}</td>
          <td>{{ item.expectedOutputValue}}</td>
          <td>{{ item.settleOutputValue}}</td>
          <td>{{ item.businessDutyPerson}}</td>
          <td>{{ item.signingDate}}</td>
          <td>{{ item.settlementCount}}</td>
        </tr>
      </table>
    </div>

script部分

import { outExcels } from '@/utils/my_common.js'

data(){
    return{
        tableTitle: [
        { tleId: 1, projectName: '合同编号' },
        { tleId: 2, projectName: '项目名称' },
        { tleId: 3, projectName: '预计产值' },
        { tleId: 4, projectName: '结算产值' },
        { tleId: 5, projectName: '业务负责人' },
        { tleId: 6, projectName: '签订日期' },
        { tleId: 7, projectName: '已生成结算次数' },
      ],
    }
}

methods: {
    // 导出
    exprot() {
      let that = this
      that
        .$axios({
          method: 'GET',
          url: that.API.contractArchivePage,
          params: {
            page: 1,
            limit: -1,
          },
        })
        .then((res) => {
          if (res.data.success) {
            let data = res.data.data.records
            that.tableData1 = data
          } else {
            that.$message({
              type: 'error',
              message: res.data.message,
            })
          }
        })
      let table = document.getElementById('contractList')
      setTimeout(() => {
        new outExcels(table, '合同存档数据明细', 'contractList').setExcels()
      }, 500)
    },
}

封装好的导出js部分

/**
 * 1 dom元素
 * 2 表格名称
 * 3
 */

import XLSX from "xlsx"
import xlsxStyle from 'xlsx-style'
class outExcels {
     constructor(table,name,tables1){
         this.table = table;
         this.name = name;
         this.tables1 = tables1;
         this.totalData =''
     
    }

    setExcels(){
       let dom = this.table;
       let name = this.name;
       let tableType = this.tables1;
       this.setExportXlxs(dom,name,tableType)

    }
     // execl 表格数据导出样式
    setExportXlxs(dom, saveName,tables) {
            let xlsxParam = { raw: true } //这个保证表格只进行解析 不做运算
            var wb = XLSX.utils.table_to_sheet(dom, xlsxParam)
            //数据明细
            if(tables ==='contractList'){
              for (let i = 0; i < 7; i++) {
                if (i == 0) {
                  wb['!cols'][i] = { wpx:230}
                } else {
                  wb['!cols'][i] = { wpx: 260 }
                } 
              }
            }

            for (const key in wb) {
              if (key === 'A1') {
                wb[key].s = {
                  font: {
                    //字体设置
                    sz: 18,
                    bold: true,
                    color: {
                      rgb: '000000', //十六进制，不带#
                    },
                  },
                  alignment: {
                    //文字居中
                    horizontal: 'center',
                    vertical: 'center',
                    wrap_text: true,
                  },
                  border: {
                    // 设置边框
                    top: { style: 'none' },
                    bottom: { style: 'none' },
                    left: { style: 'none' },
                    right: { style: 'none' },
                  },
                }
              } else if (
                key === 'A' + Number(this.totalData + 3).toString() ||
                key === 'A' + Number(this.totalData + 4).toString()
              ) {
                wb[key].s = {
                    font: {
                        //字体设置
                        sz: 12,
                        bold: false,
                        color: {
                          rgb: '000000', //十六进制，不带#
                        },
                      },
                  alignment: {
                    //文字居中
                    horizontal: 'center',
                    vertical: 'center',
                    wrap_text: true,
                  },
                  border: {
                    // 设置边框
                    top: { style: 'thin' },
                    bottom: { style: 'thin' },
                    left: { style: 'thin' },
                    right: { style: 'thin' },
                  },
                  fill: {
                    //fgColor: { rgb: 'D8D8D8' },
                  },
                }
                console.log(wb[key].s)
              } else if (
                key === 'A2' ||
                key === 'B2' ||
                key === 'D2' ||
                key === 'C2' ||
                key === 'E2' ||
                key === 'G2' ||
                key === 'I2' ||
                key === 'K2' ||
                key === 'F2' ||
                key === 'H2' ||
                key === 'J2' ||
                key === 'L2' ||
                key === 'N2' ||
                key === 'O2' ||
                key === 'P2' ||
                key === 'Q2' ||
                key === 'M2' ||
                key === 'R2' ||
                key === 'S2' ||
                key === 'T2' ||
                key === 'U2' ||
                key === 'V2' ||
                key === 'W2' ||
                key === 'X2' ||
                key === 'Y2' ||
                key === 'Z2' ||
                key === 'AA2' ||
                key === 'AB2' || 
                key === 'AC2' ||
                key === 'AD2' ||
                key === 'AE2'
              ) {
                wb[key].s = {
                  font: {
                    //字体设置
                    sz: 14,
                    bold: true,
                    color: {
                      rgb: '000000', //十六进制，不带#
                    },
                  },
                  alignment: {
                    //文字居中
                    horizontal: 'center',
                    vertical: 'center',
                    wrap_text: true,
                  },
                  border: {
                    // 设置边框
                    top: { style: 'thin' },
                    bottom: { style: 'thin' },
                    left: { style: 'thin' },
                    right: { style: 'thin' },
                  },
                  fill: {
                    fgColor: { rgb: 'BDBDBD' },
                  },
                }
              } else if (key.indexOf('!') === -1 && wb[key].v) {
                wb[key].s = {
                  font: {
                    //字体设置
                    sz: 12,
                    bold: false,
                    color: {
                      rgb: '000000', //十六进制，不带#
                    },
                  },
                  alignment: {
                    //文字居中
                    horizontal: 'center',
                    vertical: 'center',
                    wrap_text: true,
                  },
                  border: {
                    // 设置边框
                    top: { style: 'thin' },
                    bottom: { style: 'thin' },
                    left: { style: 'thin' },
                    right: { style: 'thin' },
                  },
                }
              }
            }
            //对所有的空数据加边框
            Object.keys(wb).forEach((item, index) => {
             // console.log('所有空数据----',wb[item])
              if (wb[item].t === 'z' && !wb[item].v) {
                wb[item].s = {
                  alignment: {
                    //文字居中
                    horizontal: 'center',
                    vertical: 'center',
                    wrap_text: true,
                  },
                  border: {
                    // 设置边框
                    top: { style: 'thin' },
                    bottom: { style: 'thin' },
                    left: { style: 'thin' },
                    right: { style: 'thin' },
                  },
                }
              }
            })
            let data = this.addRangeBorder(wb['!merges'], wb) //合并项添加边框
            let fileData = this.sheet2blob(data)
            this.openDownloadDialog(fileData, saveName)
     }
    //合并项添加边框
    addRangeBorder(range, ws) {
    let arr = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
    ]
    range.forEach((item) => {
        let startColNumber = Number(item.s.r),
        endColNumber = Number(item.e.r)
        let startRowNumber = Number(item.s.c),
        endRowNumber = Number(item.e.c)
        const test = ws[arr[startRowNumber] + (startColNumber + 1)]
        for (let col = startColNumber; col <= endColNumber; col++) {
        for (let row = startRowNumber; row <= endRowNumber; row++) {
            ws[arr[row] + (col + 1)] = test
        }
        }
    })
    return ws
    }
    // URL.createObjectURL下载
    sheet2blob(sheet, sheetName) {
      sheetName = sheetName || 'sheet1'
      var workbook = {
          SheetNames: [sheetName],
          Sheets: {},
      }
      workbook.Sheets[sheetName] = sheet
      // 下载这里一定要用 xlsx-style 的write() 方法才可以使导出excel表格带样式
      let XLSXStyle = xlsxStyle;
      var wbout = XLSXStyle.write(workbook, { type: 'buffer' })
      var blob = new Blob([wbout], {
          type: 'application/octet-stream',
      }) // 字符串转ArrayBuffer

      return blob
    }
    openDownloadDialog(url, saveName) {
        if (typeof url == 'object' && url instanceof Blob) {
            url = URL.createObjectURL(url) // 创建地址
        }
        var aLink = document.createElement('a')
        aLink.href = url
        aLink.download = saveName + '.xlsx' || ''
        var event
        if (window.MouseEvent) event = new MouseEvent('click')
        else {
            event = document.createEvent('MouseEvents')
            event.initMouseEvent(
            'click',
            true,
            false,
            window,
            0,
            0,
            0,
            0,
            0,
            false,
            false,
            false,
            false,
            0,
            null
            )
        }
        aLink.dispatchEvent(event)
        }
}

//车辆轨迹接口
 

export {outExcels}