JSZip库读取ePub电子书目录

目录保存在 toc.ncx 文件

javascript 复制代码
inputFile.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
       
    const reader = new FileReader();
    reader.onload = function(e) {
        const contents = e.target.result;
        JSZip.loadAsync(contents).then(function(zip) {            
            zip.forEach(function(path, entry) {
                if (!entry.dir) {					
                    if (path.endsWith('.html') || path.endsWith('.xhtml')) {
                       	......				
                    } else if (path == 'toc.ncx') {						
						entry.async('string').then(function(content) {                            
							genTOC(content);							
                        }).catch(function() {
                           
                        });	
					}
                }
            });
        });
    };
    reader.readAsArrayBuffer(file);
});

解析ncx文件获取章节名称和地址

https://www.cnblogs.com/linlf03/archive/2011/12/13/2286047.html

src 保存到 option.dataset

javascript 复制代码
function genTOC(content) {
	select.innerHTML = '';
	var parser = new DOMParser();
	var xmlDoc = parser.parseFromString(content, "text/xml");
	var navPoint = xmlDoc.getElementsByTagName('navPoint');
	for (i=0; i<navPoint.length; i++) {
		var label = navPoint[i].getElementsByTagName('navLabel')[0].getElementsByTagName('text')[0].textContent;		
		var src = navPoint[i].getElementsByTagName('content')[0].getAttribute('src');
		var option = document.createElement('option');
        option.textContent = label;
		option.dataset.src = src;
        select.appendChild(option);
	}
}

切换选项加载内容

src#分割,获取path和锚点,并跳转锚点。

javascript 复制代码
select.addEventListener('change', function(e) {
	var src = select.options[select.selectedIndex].dataset.src;	
	var srca = src.split('#');
    viewer.innerHTML = map.get(srca[0]);
	if (srca.length > 1)
		window.location.hash = srca[1];
});
相关推荐
夏幻灵7 小时前
JavaScript this 面试:五种绑定规则、优先级与常见面试陷阱
开发语言·javascript·面试
三天不学习8 小时前
Egg.js 4 突然爆火,原因是否归结于AI 原生落地需求爆发?
前端·javascript·全栈·egg.js
xcs194059 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
小宋102114 小时前
A2UI从零实战:Agent安全生成交互界面与事件回传
javascript·人工智能·安全·交互
大包子14 小时前
structuredClone vs lodash.cloneDeep:核心差异与选型指南
javascript·vue.js
lerhxx15 小时前
AI 应用中的上下文管理 —— 从"上下文窗口"到"分层压缩"的工程实践
前端·javascript
Mahut15 小时前
我在 Mac 上做了个本地剪辑器
javascript·架构·产品
汉堡大王952715 小时前
GPT-6 上线 48 小时,我扒开了 Intelligent UI 的运行机制:DIL、沙箱 Worker 和一个 React 式协调器
前端·javascript·后端
hai_android15 小时前
Chat 聊天模块功能总结
前端·javascript·vue.js
创世虚拟世界16 小时前
我做了一个 3D 虚拟世界基底,基于这个再做 3D 虚拟世界或者元宇宙,会事半功倍
javascript·人工智能·3d·gitee·虚拟现实