vue导出自定义的excel表格

1、Vue导出excel

1.1、安装依赖

npm install -S file-saver

npm install -S xlsx

npm install -D script-loader

1.2、配置

在项目src文件夹下新建文件夹vendor，将Export2Excel.js（附录1）文件放入文件夹下。

1.3、引用

Html：

<el-button
     icon="el-icon-download"
     type="warning"
     :loading="exportExcelLoading "
     @click="exportExcel()"
>导出</el-button>

Js：

<script>
import { export_json_to_excel } from '@/vendor/Export2Excel.js'
export default {
data() {
     return {
             exportExcelLoading: false,
             listLoading: false,
             list: [],
             multipleSelection:[], // 表格多选内容
             filename: ""
     };
},
created() {
     this.getListData()
},
methods: {
getListData() {
     // 获取列表数据，并渲染列表
     this. List = [] // 数据填充
},
     formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        let data = v[j]
        if (j == 'sex') {
          data = v[j] == true ? '女' : '男'
        } else if (j == 'totalAmount') {
          data = this.getThousandNum(v[j])
        } else if (j == 'purchasesItems') {
          let purchasesItems = ''
          v[j].forEach((item, index) => {
            purchasesItems += `${index + 1}、${item.replace('<span class="color_4890FF">', '').replace('</span>', '')}; \r\n`
          })
          data = purchasesItems
        }
        return data
      }))
    },
    // 批量导出数据
    exportExcel() {
      
      if (this.multipleSelection.length) { // 判断是否有选中当前导出的数据
        this.exportExcelLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['姓名', '性别', '年龄', '套餐内容', '套餐金额（元）', '支付时间']
          const filterVal = ['username', 'sex', 'age', 'purchasesItems', 'totalAmount', 'gmtCreate']
          const list = this.multipleSelection
          const data = this.formatJson(filterVal, list)
          console.log(data)
          export_json_to_excel({
            header: tHeader,
            data,
            filename: '收费信息'
          })
          this.$refs.multipleTable.clearSelection()
          this.exportExcelLoading = false
        })
      } else {
        this.$message({
          message: '请选择至少一条数据',
          type: 'warning'
        })
      }
    }
}
}
</script>

2、导出excel自定义

在项目中，通常会在导出excel时，对导出前的excel进行自定义设置，比如字体、字体颜色、单元格宽度、单元格合并、单元格文字换行等等.....

下文代码中，实现这些基本功能，在src/vendor路径下，创建excelOut.js（附录2），自定义文件内容。

界面.vue文件如下

<!--
 * @Descripttion: 报表
 * @version:
 * @Author: AowCt <awoct10@163.com>
 * @Date: 2021-07-12 14:53:08
 * @LastEditors: AowCt <awoct10@163.com>
 * @LastEditTime: 2022-07-26 11:11:36
-->
<template>
  <div class="regional-table">
    <el-button type="primary" class="export-btn" :loading="exportExcelLoading" @click="exportExcel">导出报表</el-button>
    <el-table
      id="regionalTable"
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="拼命加载中"
      tooltip-effect="dark"
      style="width: 100%"
      fit
      highlight-current-row
      :span-method="objectSpanMethod"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        v-for="item in columnsList"
        :key="item.prop"
        :prop="item.prop"
        :label="item.prop == 'ringAOrder' || item.prop == 'ringAAmount' || item.prop == 'ringBOrder' || item.prop == 'ringBAmount' ? '环比' + typeName : item.label"
        :width="(item.width?item.width:null)"
        :min-width="item.minWidth"
        :show-overflow-tooltip="true"
        :fixed="item.prop == 'date'"
      >
        <template slot-scope="scope">
          <div v-if="item.prop == 'date'" class="fontW">
            {
  { scope.row[item.prop] == null ? '-' : scope.row[item.prop] }}
          </div>
          <div v-else-if="item.prop == 'ringAOrder' || item.prop == 'withAOrder' || item.prop == 'ringAAmount' || item.prop == 'withAAmount' || item.prop == 'ringBOrder' || item.prop == 'withBOrder' || item.prop == 'ringBAmount' || item.prop == 'withBAmount'">
            <span v-if="scope.row[item.prop] == null">-</span>
            <span v-else :class="['fontW', scope.row[item.prop] > 0 ? 'color_FF5D5D' : 'color_33CE4C']">
              <i :class="[ scope.row[item.prop] > 0 ? 'el-icon-top-right' : 'el-icon-bottom-right', 'fontW']" />
              <span>{
  { (Math.abs(scope.row[item.prop] * 10000 / 100) + '').indexOf('.') != -1 ? (Math.abs(scope.row[item.prop] * 10000 / 100)).to