element Table定制化导出Excel（特定行/列导出）

需求是特定行列表格数据导出为excel,既然需求来了，那就奥利给，干就完了！
因为实现过程较曲折，遂记以便日后查看。

最后实现大概这个样子

网上各种查阅
有个方法时这种（需要额外的安装script-loader）：
table导出选中项

我项目是 vue+ts,我看到需要额外的引入两个文件，这两个文件里面我看var还在用，还有各种类型报错，肯定要大改，我是个懒人。。。。

进而找到了这个方法：表格数据导出Excel
思路很新奇：把选中的数据再用一个看不见的表格展示出来，最后导出！
如果你导出的地方较多，这样会产生较多的节点，用哪个方法你自己斟酌

---

正文
我参考的是后面的方法
首先要安装两个包：

yarn add xlsx file-saver -D

我有两个地方用到就把公用的方法提出来了utils/index.ts：

import FileSaver from "file-saver";
import XLSX from "xlsx";

// 导出excel文件
export function exportExcelSelf(id: string, filename: string = "表格数据"){
  /* 从表生成工作簿对象 */
  const wb: any = XLSX.utils.table_to_book(
    document.querySelector(`#${id}`)
  );
  /* 获取二进制字符串作为输出 */
  const wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array"
  });
  try {
    FileSaver.saveAs(
      //Blob 对象表示一个不可变、原始数据的类文件对象。
      //Blob 表示的不一定是JavaScript原生格式的数据。
      //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
      //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
      new Blob([wbout], { type: "application/octet-stream" }),
      //设置导出文件名称
      `${filename}.xlsx`
    );
  } catch (e) {
    Message.error(e.toString());
  }
  return wbout;
}

新建一个组件：exportExcel.vue

<template>
  <transition name="fadeIn">
    <div v-show="false">
      <el-table :id="etData.id" :data="epData">
        <template v-for="(item, key, index) in etData.theader">
          <el-table-column :label="item[0]" :key="index">
            <template slot-scope="scope">
              <span>{{
                item[1] ? item[1][scope.row[key]] : scope.row[key]
              }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </transition>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import { arrayData, objectData } from "../types";
import { exportExcelSelf } from "../untils/index";
@Component
export default class ExportExcel extends Vue {
  @Prop({ required: true }) exportData!: arrayData;
  @Prop({ default: { id: String, tHeaders: Object }, required: true })
   extraData!: objectData;

  private epData = this.exportData;
  private etData = this.extraData;

  @Watch("exportData", { deep: true })
  exportDataChaneg(data: arrayData) {
    this.epData = [...data];
  }

  private exportExcelSelf() {
    exportExcelSelf(this.extraData.id, "工单详情");
  }
}
</script>

父组件(只贴关键代码)：

//template
<el-table
    :data="approvalTableData"
    id="approval-table"
    @selection-change="handleSelectionChange"
>
	<el-table-column type="selection" width="55"> </el-table-column>
	<!-- 其它代码 -->
</table>

<export-excel
  :exportData="selectedListArr"
  :extra-data="exportHeaders"
  ref="selectedApprovals"
></export-excel>

//js
import { exportExcelSelf } from "../../../untils/index";
import exportExcel from "../../../components/exportExcel.vue";

@Component({
  components: {
    exportExcel
  }
})
export default class ApprovalCenter extends Vue {
	//Data:
	// 导出数据
	private selectedListArr: arrayData = [];
	// 下面id是子组件里面的id,至于tHeader的键，对应着table-column的prop(对应着你想导出的列)
	//键值数组里第一个表示表头，第二个元素是过滤功能，是一个对象{1: "值1"， 2： “值2”}
	private exportHeaders: objectData = {
	  id: "approval-ept",
	  theader: {
	    type: ["审批类型", this.APPROVAL_TYPE],
	    ask: ["申请原因"],
	    requester_name: ["创建人"],
	    create_time: ["创建时间"]
	  }
	};
	 
	//Methods
	// table选择框改变事件
	private handleSelectionChange(val: arrayData): void {
	  this.selectedListArr = [...val];
	}
	private exportApproval(): void {
	  if (this.selectedListArr.length === 0) {
		  setTimeout(() => {
			exportExcelSelf("approval-table", "工单详情");
		  }, 0);
	  } else {
		  setTimeout(() => {
			(this.$refs["selectedApprovals"] as any).exportExcelSelf();
		  }, 0);
	  }
	}
}

注意点：
1.当表格数据过长或者小时会丢失（我的截图就是）需要这样做

const wb: any = XLSX.utils.table_to_book(
    document.querySelector(`#${id}`),
    {raw: true}
  );
//row作用是js-xlsx取消自动加工

2.如果你用的element,且固定了列(使用了fix),会遇到导出表格数据重复的问题，这是因为该表格下有两个表格体（查看元素可知）。如何破？要么去除固定，要么参考下面方法（js去除多余表格）：
解决表格导出重复问题

最后我是成功了的！！大家放心去试