element Table定制化导出Excel(特定行/列导出)_el table除了最后一行都导出-程序员宅基地

技术标签: ui框架  vue  

需求是特定行列表格数据导出为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去除多余表格):
解决表格导出重复问题

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39370934/article/details/106791566

智能推荐

计算机科学与技术本科人才培养目标,计算机科学与技术本科人才培养探索-程序员宅基地

文章浏览阅读199次。[摘要]信息技术发展日新月异,高校计算机专业教育重知识轻实践的人才培养观念与培养模式亟待改革。积极致力于计算机科学与技术本科专业创新应用型人才培养的探索与实践,在“厚基础、宽口径、重实践、求创新”的教育理念指导下,改革培养模式、优化课程体系、夯实教学团队、强化实践环节,打造一支教学科研能力强、结构合理的高水平师资队伍,构建较为科学的人才培养模式和课程体系,培养一批综合素质和核心竞争力强的创新应用型..._探索建立“厚基础、重实践、能创新、擅实战”的高端应用型人才培养模式

node.js和php对比之下,前端人员学那个更好?_nodejs代替php-程序员宅基地

文章浏览阅读2.8k次,点赞4次,收藏4次。浅谈nodejs和php现在,Web开发公司和开发人员可以选择多种技术栈来构建Web应用程序。早期网络发展,不同的技术被用于前端和后端开发。但是,随着Node.js的发布,布局发生了变化,因为它允许开发人员使用 JavaScript 编写后端代码。这最终催生了MEAN(MongoDB + Express +AngularJS + NodeJS )堆栈 web 开发框架,从前端到后端甚至是数据库(MongoDB -JSON)都使用 JavaScript。在 Node.js 之前,Web 开发通常是在 PHP_nodejs代替php

微信小程序云开发云函数总结_c# wx.cloud.init-程序员宅基地

文章浏览阅读2.6k次,点赞5次,收藏24次。1、小程序创建项目时选择云开2、创建进入小程序后选择云开在设置中创建配置环境在小程序中cloudfunctions文件下选择创建的环境并创建nodejs云函数,在每个云函数下的index.js中进行编译3、login云函数创建项目后自动生成只需要上传部署就行4、新增数据云函数// 云函数入口文件const cloud = require('wx-server-sdk')..._c# wx.cloud.init

将centos7打造成桌面系统centos-程序员宅基地

文章浏览阅读3.5k次。2019独角兽企业重金招聘Python工程师标准>>> ..._centos7 palemoon

理解PHP及Zend Engine的线程安全模型(ZTS)_php zts 哪里定义的-程序员宅基地

文章浏览阅读3.3k次,点赞3次,收藏6次。在阅读PHP源码和学习PHP扩展开发的过程中,我接触到大量含有“TSRM”字眼的宏。在查找资料过程中发现有2篇文章写的不错,整理如下:深入研究PHP及Zend Engine的线程安全模型:http://blog.codinglabs.org/articles/zend-thread-safety.htmlPHP源码分析之线程安全模型:http://blog.csdn.net/h_php zts 哪里定义的

详解oracle delete和truncate的区别_delete rollba-程序员宅基地

文章浏览阅读185次。语法 delete from aa truncate table aa 区别 1.delete from后面可以写条件,truncate不可以。2.delete from记录是一条条删的,所删除的每行记录都会进日志,而truncate一次性删掉整个页,因此日至里面只记录页释放,简言之,delete from更新日志,truncate基本不,所用的事务日志空间较少。3.delete from_delete rollba

随便推点

Captcha must be filled out解决_captcha must be filled out.-程序员宅基地

文章浏览阅读1.4w次,点赞30次,收藏36次。今天注册kaggle时发现没有显示人机验证的选项,而是Captcha must be filled out的红字。然后就去网上搜索,找了一番之后终于解决。保存之后去规则列表查看可以检查是否成功,成功的应该是有上面三条的。就是这样的,因为前面下载过了所以显示覆盖已有,之前没有下载过会显示 添加。然后关闭这个页面,在kaggle注册页面刷新就可以出现人机验证了。不过我搜索第二个没有成功,搜索第一个成功的。_captcha must be filled out.

Python3:《机器学习实战》之支持向量机(4)核函数及其实现_头歌机器学习支持向量机第四关核函数-程序员宅基地

文章浏览阅读1w次,点赞9次,收藏44次。Python3:《机器学习实战》之支持向量机(4)核函数及其实现转载请注明作者和出处:http://blog.csdn.net/u011475210代码地址:https://github.com/WordZzzz/ML/tree/master/Ch06操作系统:WINDOWS 10软件版本:python-3.6.2-amd64编  者:WordZzzz_头歌机器学习支持向量机第四关核函数

live555: The input frame data was too large for our buffer size 解决方法_multiframedrtpsink::aftergettingframe1(): the inpu-程序员宅基地

文章浏览阅读7.1k次。在做live555 直播的时候,输入的图片尺寸是320*240 的时候,live555 输出的RTSP数据流可以正常解码,运行没有出现异常现象,但是把图片尺寸改为640*480的时候,就出现了问题: MultiFramedRTPSink::afterGettingFrame1(): The input frame data was too large for our buffer ..._multiframedrtpsink::aftergettingframe1(): the input frame data was too large

java RMI 技术介绍和实践_rmi请求-程序员宅基地

文章浏览阅读214次。RMI 基本思想是远程方法调用,即客户端调用某个方法,其本质是将这个方法的调用请求,发送给服务器,由服务器代为执行,且,服务器将执行结果回送客户端。对于客户端而言,RMI 只要求客户端针对方法本身,产生一种错觉:方法是在本地被调用的;对于服务器而言,RMI 相当于要处理一个来自客户端的“请求”;这个请求针对某个方法。_rmi请求

JVM对象实例化过程_jvm中对象的实例化过程-程序员宅基地

文章浏览阅读1.6k次。JVM对象的实例化从字节码文件看创建对象的过程判断对象对应的类是否加载、链接、初始化虚拟机遇到一条new指令,首先去检查这个指令的参数能否在Metaspace的常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已经被加载、解析和初始化。如果没有,那么在双亲委派模式下,使用当前类加载器已ClassLoader+包名+类名为Key进行查找对应的.class文件。如果没有找到文件,则抛出ClassNotFoundException异常,如果找到,则进行类加载,并生成对应的Class类对象_jvm中对象的实例化过程

XAMPP 安装_xampp fake sendmail-程序员宅基地

文章浏览阅读687次。XAMPP是一个易于安装且包含MySQL、PHP和Perl的建站集成软件包。XAMPP中文版软件操作简单,功能强大,我们只需要在本站下载解压后就可以安装使用。XAMPP软件支持不同的版本以及语言,帮助大家快速简便的建立服务器。华军软件园为您提供xampp中文版官方下载。xampp中文版软件特色  XAMPP此版本由phpStudy作者重新编译,精简掉五分之四,安装包只有35M。..._xampp fake sendmail