需求:electron环境下想要实现根据多个表生成多个Excel文件,打包存入文件夹内并压缩下载到本地。(实际场景描述:界面中有软件工程一班学生信息、软件工程二班学生信息、软件工程三班学生信息,上方有“一键生成”的按钮,点击时弹出文件存储位置选择框选择压缩包所要保存的位置,选择完成后点击保存后生成压缩包中存放一、二、三班三张对应班级学生信息Excel的文件。)注:生成的Excel文件需要按照对应模板进行显示(合并单元格、修改excel单元格的高度和宽度...)

思路:使用electron中的dialog选择保存文件的位置,判断所选地址是否存在;如果存在使用XLSX、XLSXStyle进行文件的生成;然后使用adm-zip将所有文件存放在zip文件夹中保存到本地。
1.下载xlsx xlsx-style adm-zip
 npm i xlsx
npm i xlsx-style
npm i adm-zip

yarn add xlsx
yarn add xlsx-style
yarn add adm-zip

注意:使用xlsx-style插件的时候需要简单修改下源码,第一种情况下会出现报错,第二种是为了可以调整excel单元格的行高。

1)修改node_modules文件夹下的xlsx-style下的dist下的cpexcel.js文件

807行:var cpt = cptable;

2)修改xlsx-style文件夹下面的xlsx.js文件 替换write_ws_xml_data以下方法

// xlsx-style版本0.8.13
// xlsx版本0.14.1
//这是xlsx-style文件中的xlsx.js的需要修改的代码,是从xlsx文件夹中的xlsx.js中复制出来的
// write_ws_xml_data找到找个方法名字,全部替换
// 把xlsx中能修改高度的代码复制到xlsx-style中
var DEF_PPI = 96, PPI = DEF_PPI;
function px2pt(px) { return px * 96 / PPI; }
function pt2px(pt) { return pt * PPI / 96; }
function write_ws_xml_data(ws, opts, idx, wb) {
var o = [], r = [], range = safe_decode_range(ws['!ref']), cell="", ref, rr = "", cols = [], R=0, C=0, rows = ws['!rows'];
var dense = Array.isArray(ws);
var params = ({r:rr}), row, height = -1;
for(C = range.s.c; C <= range.e.c; ++C) cols[C] = encode_col(C);
for(R = range.s.r; R <= range.e.r; ++R) {
r = [];
rr = encode_row(R);
for(C = range.s.c; C <= range.e.c; ++C) {
ref = cols[C] + rr;
var _cell = dense ? (ws[R]||[])[C]: ws[ref];
if(_cell === undefined) continue;
if((cell = write_ws_xml_cell(_cell, ref, ws, opts, idx, wb)) != null) r.push(cell);
}
if(r.length > 0 || (rows && rows[R])) {
params = ({r:rr});
if(rows && rows[R]) {
row = rows[R];
if(row.hidden) params.hidden = 1;
height = -1;
if (row.hpx) height = px2pt(row.hpx);
else if (row.hpt) height = row.hpt;
if (height > -1) { params.ht = height; params.customHeight = 1; }
if (row.level) { params.outlineLevel = row.level; }
}
o[o.length] = (writextag('row', r.join(""), params));
}
}
if(rows) for(; R < rows.length; ++R) {
if(rows && rows[R]) {
params = ({r:R+1});
row = rows[R];
if(row.hidden) params.hidden = 1;
height = -1;
if (row.hpx) height = px2pt(row.hpx);
else if (row.hpt) height = row.hpt;
if (height > -1) { params.ht = height; params.customHeight = 1; }
if (row.level) { params.outlineLevel = row.level; }
o[o.length] = (writextag('row', "", params));
}
}
return o.join("");
}
2.可以在utils下新建一个js文件用于写入xlsx以及xlsx-style相关方法
// 导出为excel
import XLSX from 'xlsx'
import XLSXStyle from 'xlsx-style' export function exportExcel(filename, data) {
var sheet_name = 'Sheet1'
var work_book = XLSX.utils.book_new()
var sheet = XLSX.utils.aoa_to_sheet(data)
XLSX.utils.book_append_sheet(work_book, sheet, sheet_name)
XLSXStyle.writeFile(work_book, filename) //导出Excel
}
// 将workbook装化成ArrayBuffer对象
export function workbook2ArrayBuffer(workbook) {
var wopts = {
bookType: 'xlsx',
bookSST: false,
type: 'binary',
}
var wbout = XLSXStyle.write(workbook, wopts)
// 将字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length)
var view = new Uint8Array(buf)
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
return buf
}
return s2ab(wbout)
}
3.在要进行一键生成的界面进行相关逻辑的编写。
<button @click='ClickGenerate'>一键生成</button>
...
...
methods: {
// 一键生成按钮方法
ClickGenerate(){
const fs = require('fs')
let zipName = '软件工程学生信息.zip'
// 弹出dialog选择保存文件的位置
const { dialog } = require("electron").remote
let options = {
title: "软件工程学生信息", //下载文件名称
defaultPath: zipName //下载文件title
}
dialog.showSaveDialog(options, (result) => {
if (!result) {
this.$message.warning('下载任务已取消')
return
}
let path = getDirectory(result)
if (!fs.existsSync(path)) {
this.$message.warning('所选路径不存在!')
return
}
// 准备下载zip文件
this.downloadZip(result)
})
},
// 导出涉密人员zip
async downloadZip(savePath) {
// 准备生成zip
let AdmZip = require("adm-zip")
let zip = new AdmZip()
zip.writeZip(savePath)
//#region
// 生成软件工程一班学生信息并放入zip包中
let soft1buffer = this.creatSoftbuffer('1')
if (soft1buffer) {
zip.addFile('软件工程一班学生信息' + ".xlsx", soft1buffer, "")
}
// #endregion
zip.writeZip(savePath, (error) => {
if (error) {
this.$message.error('[下载异常]' + error.message)
return
}
this.$message.success('下载已完成')
})
},
// 生成excel文件流
creatSoftbuffer(name) {
let list = []
let date = new Date()
let Y = date.getFullYear() + '-';
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
let D = date.getDate() + ' ';
let dqsj = Y + M + D // 获取当前时间
let soft1Datas = [
{ id: 1, name: "张三", age: '24', address: '哈尔滨市南岗区', grade: '软件一班' },
{ id: 2, name: "里斯", age: '22', address: '哈尔滨市呼兰区', grade: '软件一班' },
{ id: 3, name: "王二", age: '21', address: '哈尔滨市松北区', grade: '软件一班' },
...
] // 此处数据可从后台获取
switch (name) {
case '1':
list.push(["软件工程一班学生信息"]) //确定列名
list.push(["统计时间:", dqsj, "", "", ""]) //确定列名
list.push(["序号", "姓名", "年龄", "地址", "年级"]) //确定列名
let lock1 = 0
for (let i in soft1Datas) { //每一行的值
lock1 = lock1 + 1
let item = soft1Datas[i]
let column = [lock1, item["name"], item["age"], item["address"], item["grade"]]
list.push(column)
}
//Excel sheet页的名称
var sheet_name = "软件工程一班学生信息"
var sum = 5 // 列的数量,根据自身项目进行数据的更改
break
default:
console.log(0)
}
var sheet = XLSX.utils.aoa_to_sheet(list)
// 设置列宽(这里用到列的数量是用来设置不同列的不同宽度的)
let counts = soft1Datas.length + 5
sheet['!cols'] = []
sheet['!rows'] = []
for (let i = 1; i < sum; i++) {
sheet['!cols'].push({ wpx: 150 }) // 设置列宽
}
for (let j = 1; j < counts; j++) {
sheet['!rows'].push({ hpx: 14 }) // 设置列高
}
sheet['!rows'][0].hpx = 35
sheet['!rows'][1].hpx = 20
sheet['!rows'][2].hpx = 20
sheet['!rows'][3].hpx = 20
// 所有设置边框字体水平居中等样式
for (let key in sheet) {
if (sheet[key] instanceof Object) {
sheet[key].s = {
alignment: {
horizontal: 'center', // 水平居中
vertical: 'center' // 垂直居中
},
font: {
sz: 11, // 字号
name: '宋体' // 字体
},
border: { // 边框
top: {
style: 'thin'
},
bottom: {
style: 'thin'
},
left: {
style: 'thin'
},
right: {
style: 'thin'
}
}
}
}
}
// 标题样式修改
sheet.A1.s = {
font: {
name: '宋体',
sz: 16, // 字号
bold: true,
},
alignment: {
horizontal: 'center', // 水平居中
vertical: 'center' // 垂直居中
}
}
sheet['!merges'] = [
{ s: { r: 0, c: 0 }, e: { r: 0, c: 5 } }
];
//新建book
var work_book = XLSX.utils.book_new()
//将数据添加到工作薄
XLSX.utils.book_append_sheet(work_book, sheet, sheet_name)
const workbookArrayBuffer = workbook2ArrayBuffer(work_book)
//arrayBuffer转Buffer
var buf = new Buffer(workbookArrayBuffer.byteLength)
var view = new Uint8Array(workbookArrayBuffer)
for (var i = 0; i < buf.length; ++i) {
buf[i] = view[i]
}
return buf
}
}

electron中使用adm-zip将多个excel文件压缩进文件夹,使用XLSX以及XLSXStyle生成带样式excel文件的更多相关文章

  1. PHP 的解压缩ZipArchive中的extractTo()方法 LINUX+nginx环境中解压zip时文件丢失的问题

    在项目中要用ZipArchive解压ZIP文件,起初測试环境在WINDOWS平台中,測试通过,换到 LINUX+nginx 的环境中时 就出问题了(ZIP包中有文件和目录一共3百多个文件,大部分是带汉 ...

  2. Electron中使用sql.js操作SQLite数据库

    推荐sql.js——一款纯js的sqlite工具. 一.关于sql.js sql.js(https://github.com/kripken/sql.js)通过使用Emscripten编译SQLite ...

  3. Electron中Jquery的引入方式

    原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...

  4. linux中tar命令(打包、压缩、解压)、zip和unzip、rar多种压缩文件

    一.名词解释 打包:将一大堆文件或目录变成一个总的文件[tar命令] 压缩:将一个大的文件通过一些压缩算法变成一个小文件[gzip,bzip2等] Linux中很多压缩程序只能针对一个文件进行压缩,这 ...

  5. OTA升级中关于update.zip包的一些总结【转】

    本文转载自:http://429564140.iteye.com/blog/2337165 update.zip包整理 一. update.zip包的目录结构           |----boot. ...

  6. 在electron中使用sqlite:sql.js简介

    在electron中使用sqlite:sql.js简介 在开发electron应用的时候如果想要使用sqlite3,步骤上除了npm安装以外还要rebuild,比较麻烦.如果你想找一个开箱即用的sql ...

  7. Zip文件压缩(加密||非加密||压缩指定目录||压缩目录下的单个文件||根据路径压缩||根据流压缩)

    1.写入Excel,并加密压缩.不保存文件 String dcxh = String.format("%03d", keyValue); String folderFileName ...

  8. 下载zip格式文件(压缩Excel文件为zip格式)

    Mongodb配置文件参考这一篇:http://www.cnblogs.com/byteworld/p/5913061.html package util; import java.io.Buffer ...

  9. 关于ZIP大文件压缩

    实测:4.76 GB一个单文件压缩没有什么问题. import java.io.File; import java.io.FileInputStream; import java.io.FileOut ...

  10. Java实现文件压缩与解压[zip格式,gzip格式]

    Java实现ZIP的解压与压缩功能基本都是使用了Java的多肽和递归技术,可以对单个文件和任意级联文件夹进行压缩和解压,对于一些初学者来说是个很不错的实例. zip扮演着归档和压缩两个角色:gzip并 ...

随机推荐

  1. Skywalking Swck Agent注入实现分析

    项目地址: GitHub - apache/skywalking-swck: Apache SkyWalking Cloud on Kubernetes 项目简介: A bridge project ...

  2. CSS基础-关于CSS注释的添加

    在 CSS 中增加注释很简单,所有被放在/*和*/分隔符之间的文本信息都被称为注释. CSS 只有一种注释,不管是多行注释还是单行注释,都必须以/*开始.以*/结束,中间加入注释内容. 1.注释放在样 ...

  3. P3834 【模板】可持久化线段树 2

    P3834 主席树模板,求区间第k小. 1 #include <bits/stdc++.h> 2 using namespace std; 3 #define lc tr[i].ch[0] ...

  4. 谣言检测(ClaHi-GAT)《Rumor Detection on Twitter with Claim-Guided Hierarchical Graph Attention Networks》

    论文信息 论文标题:Rumor Detection on Twitter with Claim-Guided Hierarchical Graph Attention Networks论文作者:Erx ...

  5. el-cascader中最后一级显示为空在前端处理数据

    el-cascader中最后一级显示为空是因为从后端接口获取的数据最后一个children为空 <el-cascader :options="treeDeptData" st ...

  6. VS Code For Web 深入浅出 -- 导读篇

    下一代 IDE 的形态究竟是什么呢?VS Code For Web 试图回答这个问题. 背景 众所周知,VS Code 是当前工业界最优秀的代码编辑器之一.它由<设计模式>的作者 Eric ...

  7. 开源WindivertDotnet

    0 前言 Hi,好久没有写博客,因为近段时间没有新的开源项目给大家.现在终于又写了一篇,是关于网络方向的内容,希望对部分读者有帮助. 1 WinDivert介绍 WinDivert是windows下为 ...

  8. go-zero docker-compose 搭建课件服务(五):完善user服务

    0.转载 go-zero docker-compose 搭建课件服务(五):完善user服务 0.1源码地址 https://github.com/liuyuede123/go-zero-course ...

  9. Python 嵌入式打包 (图文)

    Python嵌入式打包过程 目录 Python嵌入式打包过程 下载嵌入式包 解压和配置 安装pip和其他依赖 启动项目 python嵌入式打包:将python环境与项目代码打包到同一个文件夹中,在其他 ...

  10. Landau-Vishkin

    基础算法 假设我们有两个字符串:,每个字符串由A C G T四个字母组成. 在两个字符串上,都有三种可能的编辑操作(突变): 删除某个字符 在某个位置插入字符 改变某个字符 每一个编辑操作都有惩罚值. ...