vue elementui 表格导入 elementui导出表格

Element-ui组件库Table表格导出Excel表格

• 安装依赖
• 在需要导出的页面引入依赖，或者引入全局（这里我引入了在需要导出的页面了）
• 注意注意注意！！！！
• 重要的导出在这里
• 记得表格上面要加id获取表格dom节点哦
• 如果数据中带有‘100%’等数据，不想被处理为小数，加{raw:true}即可

Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver)

安装依赖

npm install --save xlsx file-saver

在需要导出的页面引入依赖，或者引入全局（这里我引入了在需要导出的页面了）

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';

注意注意注意！！！！

import XLSX from 'xlsx';

这样引入后拿不到东西，是个undefined,具体的没去纠结，如若有需要的可以自己去看看开发文档哈，文档再这哈

https://docs.sheetjs.com/docs/installation/frameworks

导出的整体代码

<template>
  <!-- 任务进度规划 -->
  <div class="page">
    <div class="table_box">
      <el-table :data="tableData" style="width: 100%;text-align: center;" border :span-method="spanMethod" class="tableform" id="out-table">
        <el-table-column label="绩效指标">
          <el-table-column label="一级指标" width="140">
            <template v-slot="scope">
              <span v-if="scope.row.firstIsImportant" style="font-weight: bolder;font-size: 18px">*</span>
              <span v-if="scope.row.firstIsEmphasis" style="font-weight: bolder;font-size: 18px">{{ scope.row.firstName }}</span>
              <span v-else>{{ scope.row.firstName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="二级指标" width="180">
            <template v-slot="scope">
              <span v-if="scope.row.secondIsImportant" style="font-weight: bolder;font-size: 18px">*</span>
              <span v-if="scope.row.secondIsEmphasis" style="font-weight: bolder;font-size: 18px">{{ scope.row.secondName }}</span>
              <span v-else>{{ scope.row.secondName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="三级指标">
            <template v-slot="scope">
              <div style="text-align: left !important;text-indent: 15px;">
                <span v-if="scope.row.leafIsImportant" style="font-weight: bolder;font-size: 18px;">*</span>
                <span v-if="scope.row.number.length>=9" style="margin-left: 60px"></span>
                <span v-else-if="scope.row.number.length>=7" style="margin-left: 30px"></span>
                <span v-if="scope.row.leafIsEmphasis" style="font-weight: bolder;font-size: 18px">{{ scope.row.leafName }}</span>
                <span v-else>{{ scope.row.leafName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="指标值">
            <el-table-column label="申报基础值" width="150">
              <template v-slot="scope">
                <span style="color: #e6a23c">{{ scope.row.baseValue }}</span>
              </template>
            </el-table-column>
            <el-table-column label="任务目标值" width="150">
              <template v-slot="scope">
                <span style="color: #e6a23c">{{ scope.row.targetValue }}</span>
              </template>
            </el-table-column>
            <el-table-column label="监测平台值" width="150">
              <template v-slot="scope">
                <span :style="{'color':Number(scope.row.realValue) > Number(scope.row.targetValue)?'#29e722':'#e72231'}">{{ scope.row.realValue }}</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="exportExcel" size="mini" class="downloads">下载<i class="icon-download"></i></el-button>
    </div>
  </div>
</template>

<script>

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      tableData: [],
    }
  },
  created() {
    this.getTaskPlanProgressData()
  },
  methods: {
    // 导出表格为Excel
    exportExcel() {
      var professional = sessionStorage.getItem('professional')
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      const wscols = [ // 定义每列的宽度 我这里是16列
        { wch: 19 },
        { wch: 19 },
        { wch: 50 },
        { wch: 19 },
        { wch: 19 },
        { wch: 19 },
      ]
      wb.Sheets[wb.SheetNames[0]]['!cols'] = wscols
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
        align: 'center',
        valign: 'vcenter',
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          `${professional}任务进度规划.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

	//处理合并
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        //第一列
        if (row.firstRowNumber) {
          return {
            rowspan: row.firstRowNumber,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else if (columnIndex == 1) {
        //第二列
        if (row.secondRowNumber) {
          return {
            rowspan: row.secondRowNumber,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }

    },

	//获取表格数据
    getTaskPlanProgressData() {
      const that = this;
      this.$axios.post(this.$apiurls.taskPlanProgress, {}, {
        loading: false,
      }).then((res) => {
        if (res) {
          const ret = res.data;
          let arr = []
          for (var i = 0; i < ret.length; i++) {
            const first = ret[i];

            if (first.children && first.children.length && first.children.length > 0) {
              for (var j = 0; j < first.children.length; j++) {
                const second = first.children[j];
                if (second.children && second.children.length && second.children.length > 0) {
                  for (var k = 0; k < second.children.length; k++) {

                    const leaf = second.children[k];
                    let tmpobj = {}

                    tmpobj.firstName = first.number + ". " + first.name;
                    tmpobj.secondName = second.number + ". " + second.name;
                    tmpobj.leafName = leaf.number + ". " + leaf.name;
                    tmpobj.leafIsImportant = leaf.isImportant;
                    tmpobj.leafIsEmphasis = leaf.isEmphasis;
                    tmpobj.number = leaf.number;
                    if (k == 0) {
                      //二级第一个
                      tmpobj.secondRowNumber = second.totalLeafNumber;
                      tmpobj.secondIsImportant = second.isImportant;
                      tmpobj.secondIsEmphasis = second.isEmphasis;
                      if (j == 0) {
                        //一级第一个
                        tmpobj.firstRowNumber = first.totalLeafNumber;
                        tmpobj.firstIsImportant = first.isImportant;
                        tmpobj.firstIsEmphasis = first.isEmphasis;
                      }
                    }

                    arr.push(tmpobj)
                    if (leaf.value) {
                      if (leaf.value.baseValue) {
                        tmpobj.baseValue = leaf.value.baseValue;
                      } else {
                        tmpobj.baseValue = '--';
                      }
                      if (leaf.value.targetValue) {
                        tmpobj.targetValue = leaf.value.targetValue;
                      } else {
                        tmpobj.targetValue = '--';
                      }
                      if (leaf.value.realValue) {
                        tmpobj.realValue = leaf.value.realValue;
                      } else {
                        tmpobj.realValue = '--';
                      }
                    } else {
                      tmpobj.baseValue = '--';
                      tmpobj.targetValue = '--';
                      tmpobj.realValue = '--';
                    }
                  }
                }
              }
            }
          }
          that.tableData = arr;
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.table_box {
  position: relative;
}
.downloads {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #39456e;
  border-color: #39456e;
}
.icon-download {
  background: url("../../../assets/img/icon/download.svg") no-repeat;
  background-size: 100% 100%;
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 5px;
}
.tableform {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
}
/* 修改表格头部背景 */
::v-deep .el-table th {
  background: rgba(31, 50, 94, 0.8) !important;
  // border-bottom: 0px !important;
  color: #fff;
  font-weight: 400;
}
.el-table--border /deep/ th.el-table__cell,
/deep/ .el-table__fixed-right-patch {
  border-color: #39456e;
  border-right: 0px;
  text-align: center;
}

.el-table--border /deep/ .is-group.has-gutter > tr:last-child th,
.el-table--border /deep/ .is-group.has-gutter tr:nth-child(2) th {
  border-bottom: 0px;
}

.el-table--border
  /deep/
  .is-group.has-gutter
  tr:nth-child(2)
  > th:nth-child(4) {
  border-bottom: 1px solid #39456e;
}

.el-table--border /deep/ .is-group.has-gutter tr:nth-child(2) th,
.el-table--border /deep/ .is-group.has-gutter tr:last-child th {
  border-right: 1px solid #39456e;
}

.el-table--border /deep/ .is-group.has-gutter tr:nth-child(2) th:nth-child(4),
.el-table--border /deep/ .is-group.has-gutter tr:last-child th:nth-child(3) {
  border-right: 0px;
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: transparent;
}

.el-table--border,
.el-table--group {
  border: 0px;
}

/* 修改表格行背景 */
::v-deep .el-table tr {
  background: rgba(35, 42, 67, 1);
}

// 行间距
/deep/ .el-table__body {
  // border-spacing: 0 5px;
}

.el-table,
.el-table__expanded-cell {
  background: transparent !important;
}
::v-deep .el-table::before {
  height: 0;
}

::v-deep .el-table--enable-row-hover .el-table__body tr td {
  // border-bottom: 0px !important;
  // border-right: 0px;
  color: #fff;
  text-align: center;
  border-color: #39456e;
}

/* 修改表格鼠标悬浮hover背景色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background: rgba(31, 50, 94, 0.8);
}
.tx-center {
  margin-top: 10px;
}
</style>

重要的导出在这里

记得表格上面要加id获取表格dom节点哦

如果数据中带有‘100%’等数据，不想被处理为小数，加{raw:true}即可

var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),{raw:true});