关于导出的Excel文件的本质

上篇文章中提到关于xlsx改造冻结窗格的代码,我是怎么知道要加pane的呢,加下来就把我的心路历程记录一下。

我改造之前也是没有头绪的,我网上查了很多,只告诉我如何使用,但源码里没有针对!freeze的处理,所以即便把!freeze传过去也是无用的。于是我想既然js可以实现excel的导出,那应该有办法能实现,只是原作者写到pro版里了,那么我能不能加上呢,如何加呢?

我先贴上部分代码

javascript 复制代码
// 冻结第一行和第一列:
            worksheet['!freeze'] = {
                xSplit: "0",  //冻结列
                ySplit: "1",  //冻结行
                // topLeftCell: "A2",  //在未冻结区域的左上角显示的单元格,默认为第一个未冻结的单元格
                state: "frozen"
            }

            var wbout = XLSX.write(workbook, {
                bookType: 'xlsx',
                bookSST: false,
                type: 'binary'
            })

第一步

首先我打印了wbout,发现是一个二进制文件,然后找到xlsx.write的write

javascript 复制代码
// 部分代码
...
XLSX.parse_zip = parse_zip;
XLSX.read = readSync; //xlsread
XLSX.readFile = readFileSync; //readFile
XLSX.readFileSync = readFileSync;
XLSX.write = writeSync;
XLSX.writeFile = writeFileSync;
XLSX.writeFileSync = writeFileSync;
XLSX.writeFileAsync = writeFileAsync;
XLSX.utils = utils;
XLSX.writeXLSX = writeSyncXLSX;
XLSX.writeFileXLSX = writeFileSyncXLSX;
XLSX.SSF = SSF;

第二步

然后找到writeSync方法 -》 write_zip_type -》 write_zip -》write_zip_xlsx

javascript 复制代码
function write_zip(wb, opts) {
	console.log('write_zip', opts.bookType)
	if(opts.bookType == "ods") return write_ods(wb, opts);
	if(opts.bookType == "numbers") return write_numbers_iwa(wb, opts);
	if(opts.bookType == "xlsb") return write_zip_xlsxb(wb, opts);
	return write_zip_xlsx(wb, opts);
}

关键点就在write_zip_xlsx方法中

在write_zip_xlsx方法中,我们找到xl/worksheets/sheet的下面的write_ws_xml方法,

write_ws_xml方法返回的就是一段字符串,就是我们要导出的excel的内容

javascript 复制代码
// 部分代码
...
var wsrels = {'!id':{}};
		var ws = wb.Sheets[wb.SheetNames[rId-1]];
		var _type = (ws || {})["!type"] || "sheet";
		switch(_type) {
		case "chart":
			/* falls through */
		default:
			f = "xl/worksheets/sheet" + rId + "." + wbext;
			zip_add_file(zip, f, write_ws_xml(rId-1, opts, wb, wsrels));
			ct.sheets.push(f);
			add_rels(opts.wbrels, -1, "worksheets/sheet" + rId + "." + wbext, RELS.WS[0]);
		}

第三步

这里我们在write_zip_xlsx方法的xl/worksheets/sheet的下面打印一下console.log(write_ws_xml(rId-1, opts, wb, wsrels))

这里我们可以看见返回的是一个类似xml格式的字符串

(这里我加上!freeze代码之后的打印结果,没加之前是没有<pane xSplit="0" ySplit="1" topLeftCell="undefined" activePane="undefined" state="frozen"/>这串字符的)

我们就想了excel的原理是不是就是xml格式呢,我怎么往里面添加上它能识别的标签呢??

带着疑问,我查找了下面的资料:

Excel2007格式分析和XML解析

Excel文件的本质:一个包含XML、图片文件的压缩文件夹-压缩文件-上犹电脑信息网

根据资料,我试着本地新建一个excel文件,分别一次设置冻结窗口,一个不设置,然后将文件后缀改为zip、解压,得到的目录和资料中的一致,对比两个xl/worksheets/ sheet1.xml 的区别,发现是**<pane>**标签,知道冻结窗口的标签了,接下来就简单了,我们就可以添加下面的代码了

javascript 复制代码
//部分代码
...
// 冻结窗口
	var pane = null;
	var freeze = ws['!freeze'];
	console.log(freeze)

	if (freeze !== undefined) {
		pane = writextag('pane', null, {
			xSplit: freeze.xSplit, // 冻结列
			ySplit: freeze.ySplit, // 冻结行
			topLeftCell: freeze.topLeftCell, // 在未冻结区域的左上角显示的单元格,默认为第一个未冻结的单元格
			activePane: freeze.activePane,
			state: freeze.state || 'frozen'
		})
	}
	return writextag("sheetViews", writextag("sheetView", pane, sview), {});

以上就是完整的流程,改造冻结窗口只是示例,通过类似的过程,我们可以改造成我们想要的其他格式。

相关推荐
lsp程序员01018 分钟前
使用 Web Workers 提升前端性能:让 JavaScript 不再阻塞 UI
java·前端·javascript·ui
J***Q2921 小时前
前端路由,React Router
前端·react.js·前端框架
1***81531 小时前
前端路由参数传递,React与Vue实现
前端·vue.js·react.js
q***13612 小时前
十七:Spring Boot依赖 (2)-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
xixixi777773 小时前
了解一下Sentry(一个开源的实时错误监控平台)
前端·安全·开源·安全威胁分析·监控·sentry
Keely402853 小时前
学习编写chrome插件:Hello World 扩展
前端·chrome
hhcccchh4 小时前
学习vue第三天 Vue 前端项目结构的说明
前端·vue.js·学习
源力祁老师4 小时前
Odoo 19 制造与会计集成深度解析
前端·javascript·制造
iFlow_AI5 小时前
iFlow CLI Hooks 「从入门到实战」应用指南
开发语言·前端·javascript·人工智能·ai·iflow·iflow cli