* @typedef 数组返回拼接字符串格式
* @param tableRows Array 表格字符串列表
* @returns fullTemplateStr string 拼接完成的字符串
private arrayToTableStr(tableRows: Array
) {
// 最后完整的字符串内容
let fullTemplateStr = ''
//拼接整个头部
fullTemplateStr += template.head
// 增加sheet的头部
fullTemplateStr += template.sheet.head
// 加上内容
fullTemplateStr += 'sheet1'
// 增加sheet的尾部
fullTemplateStr += template.sheet.tail
// 增加上中间的部分
fullTemplateStr += template.mid
fullTemplateStr += template.table.head
// 加上正式内容
tableRows.forEach((row) => {
fullTemplateStr += row
fullTemplateStr += template.table.tail
//拼接整个尾部
fullTemplateStr += template.foot
return fullTemplateStr
* @typedef a链接导出
* @param fileName 文件名称
* @param linkUrl 链接
* @param fileExtension 文件后缀
private createLink(linkUrl: string, fileName?: String, fileExtension?: FileType) {
fileExtension = fileExtension || FileType.xml//默认类型为xml
let aTag = document.createElement('a')
aTag.download = `${fileName || this.fileName}.${fileExtension}`
document.body.appendChild(aTag)
aTag.href = linkUrl
aTag.click()
document.body.removeChild(aTag)
* @description 将表格的每一项创建并添加到数据中
* @param titleArray Array 标题列表
* @param jsonData 内容体
* @param styleList 样式列表
private createRowArray(titleArray: Array, jsonData: Array, styleList?: any) {
const tableRows = []//放数据的地方
// let computedStyle = {}//计算过后的样式对象
let row = ''
// 需要把头的也遍历一边，后面需要拼接
// row += ``
row += '
'
// 竖排
titleArray.forEach(td => {
row += `| ${td} | `
row += '
'
// 每一列都加上去
tableRows.push(row)
// 便利获取到样式以及元素的k-v，拼接起来
// 横排
jsonData.forEach(tr => {
row = ''
// 竖排
Object.keys(tr).forEach(td => {
styleList[td] ? row += `${tr[td]}` : row += `| ${tr[td]} | `
row += '
'
// 每一列都加上去
tableRows.push(row)
return tableRows
*@typedef 把样式拼接成字符串的形式
*@param styleList Array 样式对象
private formatStyle2String(styleList: any) {
if (!styleList || styleList.length === 0) { return [] };
const _styleList = []
Object.keys(styleList).forEach((styleKey) => {
let str = ' style=\''//注意，这儿是空了一个格子的
Object.keys(styleList[styleKey]).forEach(_o => {
str += `${_o}:${styleList[styleKey][_o]};`
str.slice(str.length, 1)//除去最后的空格，毕竟还是要严谨点的
str += '\' '//注意，最后也是空了一个格子的
_styleList[styleKey] = str
return _styleList
* @typedef 以table的形式导出execel文件
* @param titleArray 标题 Array ['标题1', '标题2', '标题3', '标题4']
* @param jsonData 内容体 Array [{k1:v1,k2:v2}]
public createByTable(titleArray: Array, jsonData: Array, styleList?: Array) {
const styleArray = this.formatStyle2String(styleList)
const data = this.createRowArray(titleArray, jsonData, styleArray)
// 封装成为一个sheet
let blob = new Blob([this.arrayToTableStr(data)], { type: 'application/vnd.ms-excel' })
//解决中文乱码问题
blob = new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type })
this.createLink(window.URL.createObjectURL(blob), this.fileName, FileType.xls)
// 遍历数组，获取k-v，
// 枚举类
export enum FileType {
csv = 'csv',
xml = 'xml',
xls = 'xls'
// 接口
export interface Ictx {
worksheet: string,
table: string,
sheetName: string
export interface IstyleList {
[name: string]: Istyle
// 单个样式的实例
export interface Istyle {
'text-align': string,
'background-color': string,
// ['background-color':string]:string
width?: string,//宽度 100(px)
height?: string,//高度 100(px)
color?: string//颜色 #00ff00
border: string//border 1px solid #ccc
//静态变量
// table转化需要的变量
const utf8Heading = ''
// table的需要模板
export const template = {
head: '' + utf8Heading + '',
table: {
head: ''
foot: ''
使用简单是简单，但是兼容性没做测试，如果实际使用，建议用比较多星的库，或则帮我测测兼容，留言我来改，因为可能是execel导出系列的最后一篇(objectxactive的估计不会写),所以罗索下，最好后台导出，因为前端导出会卡，测试了导出10w条简单的数据，大概需要10s
npm: [aexecel](https://www.npmjs.com/package/aexecel)
github:[aexecel](https://github.com/mkhbz/aexecel)
前序上一次大概讲了下导出execel的比较简单的做法，这回补上一个更简单的方法，就用execel导出的。比较方便，不多叙述思路大体思路很简单，就是1.先将数据放在一个数组中，整理成为一个数组2.保存到table格式的文本中3.更新table的数据，走execel的路线进行封装4.将table转化为流的方式，写进去（二进制的操作，这个是必走之路）大概难点在三个1.数组长什么样子？2.table怎么封装成execel的格式3.怎么转化为流代码代码其实很
excel
.ts
excel
.ts是基于
TypeScript
编写的
Excel
综合解决方案，包含POJO模式的定义，多框架支持的Web端渲染以及Node
导出
服务。
要启动并运行本地副本，请遵循以下
简单
步骤。
这是
一个
如何列出使用软件所需的内容以及如何安装它们的示例。
npm install npm@latest -g
git clone https://github.com/wx-chevalier/
excel
.ts.git
安装NPM软件包
npm install
excel
模式
Excel
节点生成器
有关建议的功能（和
// exportTo
Excel
.ts
import * as XLSX from 'xlsx';
const
EXCEL
_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const
EXCEL
_EXTENSION = '.xlsx';
export class
Excel
Service {
constructor() {
上一篇博客👉链接在这，我们使用vue3+ts实现了导入的功能，接下来，还是使用同
一个
组件（element-plus上传组件）来实现
导出
，在上篇博客中，我们在使用这个组件的同时写了
一个
下载模板的功能，接下来，这篇博客，我们就帮助大家完善下载模板的功能以及实现
导出
的功能。✌️✌️✌️
我们通过两个按钮来实现导入
导出
功能、具体模板的样式如下
具体样式，请参考上篇博客
以上就是下载模板的功能实现
这样我们就实现了
导出
功能，同时很多时候我们可能会遇到按需
导出
的需求，这是，我们只需要在接口中传递相应的参数即可。..
导出
excel
的方法
简单
来说有两部思路，
一个
是‘
excel
格式’是什么格式，
一个
是怎么下载，后者比较
简单
，基本实现都是以
一个
a标签，设置link元素下载，问题在于前者，对于
excel
的格式了解比较少的时候，会比较难下手，以及再ie等其他版本的浏览器
导出
的时候，需要考虑什么因素？
下面还是举
一个
简单
点的
例子
（比较普遍的现象）
导出
一个
excel
文件
核心在于
导出
流的时候的文件格式，一般选用的是csv格式，部分时候也有用table等html来假冒
excel
，但是试过会有错误提示，所以不考虑，而a标签的我们
++ 或 -- 时，这两个运算符在操作数上的行为都被清晰定义了： ++ 或 -- 作为前缀会在其他任意运算发生之前修改操作
数，而作为后缀则会在整个表达式计算完毕后才修改操作数。
有点少。在写
一个
没啥用的
扩展运算符 三个点（.....
没错我又来水文章了。现在要水的是网络状态的监听，很
简单
的，就两个事件，
一个
是ononline，
一个
的话是onoffline代码：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
