1、安装xlsx包(我使用的npm安装的

npm install xlsx

2、使用

(1)在你需要导出的页面的  .ts 中引入相关的file.service.ts文件

import {FileService} from '../../../file.service'; ===》这个文件的作用就如同它的名字一样是为表格服务的

(2)依赖注入

(3)导出文件

关于导出表格的数据什么的我就不进行详细的赘述了,主要是调用你封装在 file.service.ts 中的 multiDownLoadExl() 函数,这个函数的是我们自己写的。里面的参数根据的你的需要来添加,下面只有我需要使用的参数。

下面我会对里面用到的参数进行一一的讲解

that.selectedAllAlarmList ===> 这个是我们需要导出的数据,数据是一个JSON数组的格式:

JSON数组中的一个大数组 [  ] 代表一个表格,大数组中的 { } 代表一行数据

that.selectedAllAlarnList = {

'001': [

{'目录': ' 1 ',  '名称': ' 1 ',  '说明': ' 1 ' },

{'目录': ' 1 ',  '名称': ' 1 ',  '说明': ' 1 ' },

{'目录': ' 1 ',  '名称': ' 1 ',  '说明': ' 1 ' }

],

'002': [

{'目录': ' 1 ',  '名称': ' 1 ',  '说明': ' 1 ' },

{'目录': ' 1 ',  '名称': ' 1 ',  '说明': ' 1 ' },

{'目录': ' 1 ',  '名称': ' 1 ',  '说明': ' 1 ' }

],

'003': [

{'目录': ' 1 ',  '名称': ' 1 ',  '说明': ' 1 ' },

{'目录': ' 1 ',  '名称': ' 1 ',  '说明': ' 1 ' },

{'目录': ' 1 ',  '名称': ' 1 ',  '说明': ' 1 ' }

]

}

fillName ===》就是你导出的工作簿的名字(就是文件名)

longestList ===》这是我们根据需要设置的单元格列宽,因为导出的表格的宽度都是默认的,不符合我的要求。

要记住单元格的宽度是一个一个单元格设置的。一个行单元格的宽度一个数组。根据我的实践证明,设置宽度的几个变量只有

wch有效,wch代表多少个字符。

格式:

longestList  = {

'001':  [ { wch: 15 } ,{ wch: 15 },{ wch: 15 } ],

'002':  [ { wch: 15 } ,{ wch: 15 },{ wch: 15 } ],

'003':  [ { wch: 15 } ,{ wch: 15 },{ wch: 15 } ]

}

    rowPropList ===》这是我们根据需要设置的单元格列高,因为导出的表格的高度都是默认的,不符合我的要求。
    rowPropList 的格式跟longestList  是一样的。要求跟设置列宽也差不多。
mergesList ===》 这个参数是是用来设置你需要合并单元格的。
    s =>是起始单元格;e => 是结束单元格;c => 是第几行;r => 是第几列
    格式:
 merges = [{s: {c: 0, r: 0}, e: {c: 3, r: 0}},{s: {c: 0, r: 3}, e: {c: 3, r: 3}},{s: {c: 0, r: 4}, e: {c: 3, r: 4}}
];
sheetNames ===》这个参数是用来设置sheetName的,一个sheetName代表一个表格,就是下面这个东西 :
格式:
sheetNames  = [ 'sheet1','sheet2' ,'sheet3' ]
以上是我对函数中需要使用的参数的一个解释说明,接下来我对我的multiDownLoadExl函数继续解说:
    下面就是我写的函数:
multiDownLoadExl(dataAll, fileName, colProp, rowProp, merges, sheetNames) {let i = 0;const wb: XLSX.WorkBook = {SheetNames: sheetNames, Sheets: {}, Props: {}};for (const item in dataAll) {const toSet = XLSX.utils.json_to_sheet(dataAll[item], {skipHeader: true});wb.Sheets[sheetNames[i]] = toSet; // 通过json_to_sheet转成单页(Sheet)数据
    const wsname: string = wb.SheetNames[i];const ws: XLSX.WorkSheet = wb.Sheets[wsname];ws['!cols'] = colProp[item]; //单元格宽度
    ws['!rows'] = rowProp[item]; //列高
    ws['!merges'] = merges[item]; //合并单元格
    i++;}fileName += '.' + this.wopts.bookType;this.saveAs(new Blob([this.s2ab(XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'}))], {type: ''}), fileName);
}
    因为这是一个工作簿中包含多个表格,因此需要进行一个for循环,记住JSON数组的for循环是用
for...in..。
XLSX.utils.json_to_sheet ===》将JSON数组转换为表格格式;
skipHeader ===》 表格是否需要标题,根据自己的需求而定;
saveAs函数:
// saveAs调用在本地机器上下载文件
saveAs(obj, fileName) {//当然可以自定义简单的下载文件实现方式
  const tmpa = document.createElement('a');tmpa.download = fileName || '下载';tmpa.href = URL.createObjectURL(obj); //绑定a标签
  tmpa.click(); //模拟点击实现下载
  setTimeout(function () { //延时释放
    URL.revokeObjectURL(obj); //URL.revokeObjectURL()来释放这个object URL
  }, 100);
}
s2ab() 函数:

//字符串转字符流

    s2ab(s) {// console.log(s);
      if (typeof ArrayBuffer !== 'undefined') {const buf = new ArrayBuffer(s.length);const view = new Uint8Array(buf);for (let i = 0; i !== s.length; ++i) {view[i] = s.charCodeAt(i) & 0xFF;}return buf;} else {const buf = new Array(s.length);for (let i = 0; i !== s.length; ++i) {buf[i] = s.charCodeAt(i) & 0xFF;}return buf;}}

建议:

参考xlsx的官网文档使用

xlsx-style用于设置xlsx表格的样式的。

提示:

(1)cell.s无效(也就是说通过cell.s来设置表格的相关字体样式无效)

(2)在fill.service.ts中记得引入xlsx ==》 import * as XLSX from 'xlsx';

xlsx官网地址:https://www.npmjs.com/package/xlsx

xlsx-style官网地址:https://www.npmjs.com/package/xlsx-style

angular2 + XLSX 导出一张工作簿中包含多张表格相关推荐

  1. oracle两列合并成一列_POWER QUERY--一个工作簿内的多张工作表合并汇总

    如果要汇总的工作表是在同一个工作簿内,此时的汇总并不复杂,但要先弄清楚:这些工作表数据的汇总操作,是纯粹将数据堆积汇总到一张表,还是根据各张表之间的关联字段来进行汇总. 01 多张工作表的堆积汇总 此 ...

  2. update两个表中的同一字段的数据_用Python实现多个工作簿中的数据按列合并到同一个工作表中...

    1.需求描述 现在有三个工作表,如下: 在这里插入图片描述 并且每个工作表中的内容如下: 在这里插入图片描述 需要将这三个工作簿中的分数这一列合并到一起,最终实现效果如下图: 在这里插入图片描述 2. ...

  3. 用Python实现多个工作簿中的数据按列合并到同一个工作表中

    1.需求描述 现在有三个工作表,如下: 并且每个工作表中的内容如下: 需要将这三个工作簿中的分数这一列合并到一起,最终实现效果如下图: 2.实现代码 ''' 遇到问题没人解答?小编创建了一个Pytho ...

  4. vb整合多个excel表格到一张_[Excel]同一工作簿中多个工作表保存成独立的表格

    一个工作簿中有多个表格,如何将其表格单独保存成一个独立的文档呢? 如果表格少,操作如下:选中要导出表格的标签名--鼠标邮件--移动或复制表格--新建工作簿. 当如果表格太多呢,以上方法就太罗嗦了. 简 ...

  5. Excel按照原图片名称批量导出工作簿中所有图片

    今天小编要和大家分享的是,Excel按照原图片名称批量导出工作簿中所有图片的操作,看下图,在不同的工作表中有不同的形状图片,如何一键导出呢 (方方格子插件) 1.先看到动图演示 2.我们可以选择方方格 ...

  6. VBA从多张工作簿(workbooks)中多张工作表(worksheets)同一位置提取数据

    数据:N张工作簿,每张工作簿里又有M张工作表,每张工作表的同一位置Cells(2,16)有需要的数据,想讲这些数据汇总到一张新的表格. 新建一张"汇总.xlsm",并打开,新建su ...

  7. excel合并多个工作表_如何快速的合并多个 Excel 工作簿至一个工作簿中的工作表?...

    作者:汪汪家的宝贝 链接:https://www.jianshu.com/p/c8ae6852f1da 前言 在日常工作过程中,我们有可能需要把多个Excel工作簿的内容汇总到一张Excel工作表中. ...

  8. 使用Python批量合并多个工作簿中的同名工作表

    批量合并多个工作簿中的同名工作表 使用Python的xlwings模块批量合并多个工作簿中的同名工作表 import os import xlwings as xw import pandas as ...

  9. 批量重命名工作簿中的工作表名

    一.批量重命名一个工作簿中的所有工作表 工作簿中有10个工作表,每张工作表的名字中都带有"2020年"字样,想把这几个字去掉.虽然说一个一个的重命名也花不了多少时间,但是如果这个工 ...

  10. VBA 批量打开workbook工作簿,汇总到同一workbook工作簿中

    ** VBA 批量打开workbook工作簿,汇总到同一workbook工作簿中 ** 前言:此VBA程序,通用! Sub 收集文件夹中文件路径() Dim f'1.批量打开文件,将文件路径记录到数组 ...

最新文章

  1. Odoo小数精度及货币精度详解
  2. Future 模式介绍
  3. haproxy定义规则限制IP访问
  4. UNITY 打包时提示sdk tools 或 sdk build tools版本低时可以直接点update 按钮进行更新...
  5. 子页面刷新父页面,避免弹出重复提交窗口
  6. 利用Basic authentication 测试不同user的metadata access request
  7. 队列的定义与操作-顺序存储,链式存储(C语言)
  8. Spring学习总结3——配置datasource三种方式
  9. 【Spring Bean的生命周期】
  10. Aop_AspectJ实现
  11. PyTorch学习—9.模型容器与AlexNet构建
  12. Pytorch实现手写数字识别
  13. php中通过post和get传递数组的方法
  14. 分布式文件系统HDFS原理篇
  15. python制作QQ游戏--大家来找茬游戏辅助(一)
  16. Laravel 的闪存数据(Flash Data)
  17. 虚拟机上装oracle,cmd窗口输入法有问题,按了U,I,O,P,J,K,L,M这些键为什么不是UIOPJK
  18. 《青春依然,再见理想——献给学弟学妹》大四学生的万字忏悔书,警示学弟学妹...
  19. 详观商业巨头如何走出经济“寒冬”,迎来初春
  20. 老司机带你快速实现Python下载与安装

热门文章

  1. office2021相对旧版本有哪些优势?
  2. 苹果cms对接双端android源码,苹果cms影视双端APP搭建教程
  3. Java实战项目-移动电商秒杀系统seckill优化
  4. Invalid bound statement (not found): org.seckill.dao.Suc
  5. Pytorch安装教程
  6. 从韩春雨事件看学术成果的辨别
  7. 新库上线 | CnOpenData制造业工商注册企业基础信息数据
  8. 百度快排点击软件-搜索引擎排名模拟点击器-快排点击软件
  9. 大学生创新创业类竞赛参赛指南
  10. 设有一个 Student 数据库,包括 数据库,包括 学生 , 课程 , 选修三个关系: 三个关系: 学生 学生:S ( Sno ,Sname ,Ssex ,Sage,Sdept ) 课程 课程: