关于导出的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), {});

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

相关推荐
蜗牛快跑2136 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy7 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
冰淇淋烤布蕾21 分钟前
EasyExcel使用
java·开发语言·excel
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
图片转成excel表格1 小时前
Excel中怎么提取超出部分数值,比如5w是目标,超出100%和120%的值怎么用公式提取?
excel