关于导出的Excel文件的本质

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

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

我先贴上部分代码

// 冻结第一行和第一列：
            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

// 部分代码
...
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

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的内容

// 部分代码
...
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>标签，知道冻结窗口的标签了，接下来就简单了，我们就可以添加下面的代码了

//部分代码
...
// 冻结窗口
	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), {});

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