Web阅读器开发系列教程（入门篇）

做者：Sam

前言

最近我在慕课网发布了两门关于Web阅读应用开发的课程，采用Vue全家桶开发。免费课是入门级课程，初步实现了一个阅读器。实战课是进阶课程，实现了一个高性能的互联网阅读应用。两个项目都采用自适应布局，同时支持PC端和移动端，想要系统提高前端技能的同窗不要错过。

免费课《快速入门Web阅读器开发》当即学习

免费课DEMO当即体验

实战课《Vue2.5 实战微信读书 媲美原生App的企业级web书城》当即学习

实战课DEMO当即体验

说明

本教程为系列教程，主要目的是向你们分享如何开发一个功能强大的Web阅读器，技术栈是Vue全家桶。

常见的电子书格式

在上一篇手记中，我介绍了阅读应用的常见功能与阅读器的实现原理，没有读过的同窗能够点击这里。在开发阅读器以前，咱们先要了解常见的电子书格式，如：txt、PDF、ePub和mobi等，下面简单介绍这些格式：

• txt是纯文件文件，它没法支持多媒体格式，小说类应用中使用较多，但没法知足电子出版物的需求；
• PDF是很是主流的电子书格式，可是在移动端下排版效果不佳，因此移动阅读不多采用PDF格式；
• ePub是目前最主流的电子书格式，电子书内容采用html显示，由css控制样式，不论在PC端仍是移动端都有很是好的显示效果，不足之处在于文件容量较大，并且解析时须要解压，会消耗性能，能够借助本地缓存技术来缓解这个问题；
• mobi是亚马逊Kindle的电子书格式，须要在Kindle中阅读。

本教程主要讲解ePub阅读器的开发。

阅读器的开发路径

一个完整的ePub阅读器的开发流程大体以下：

• 解析：获取图书的基本信息、目录信息、章节信息等
• 渲染：在界面上展现电子书内容，支持屏幕尺寸自适应
• 翻页：支持上一页和下一页的翻页操做
• 字号：支持修改文字的字号大小
• 字体：支持修改文字的字体，可以支持CSS3的Web字体
• 主题：支持切换阅读器的背景色和文字颜色
• 进度：支持动态切换阅读器的显示进度
• 目录：支持多级目录展现，点击目录快速跳转到指定章节
• 搜索：支持全文搜索和章节搜索
• 书签：支持将当前的阅读位置保存为书签，并能回溯
• 笔记：支持选中一段文本后加入笔记
• 适配：针对PC端和移动端进行专门的适配处理

上一篇手记为你们粗略展现了阅读器的开发流程，接下来的系列教程我将由浅入深，为你们详细介绍如何开发一个阅读器。

ePub标准

正式开发以前，咱们须要了解什么是ePub标准。ePub是Electronic Publication（电子出版物）的缩写，它是IDPF制定的电子出版物标准。

IDPF介绍

• IDPF是一个国际组织，全名是国际数字出版论坛，官网是www.idpf.org，它的使命是致力于电子出版物的推广，ePub就是该组织制定的标准。
• IDPF的董事会有14个席位，收入来源是会员单位的会员费，目前IDPF拥有200多家会员单位，年收入100万美圆的公司，每一年需支付775美圆的会费，以此类推，加入IDPF会员就有机会参与董事会席位竞争或参与电子出版物标准的制定等。
• IDPF的主要工做是制定、完善和推广ePub标准，主要用于解决纸质书的电子化问题，包含分发、管理和加密等等。

资料来源：idpf.org/about-us

ePub标准介绍

ePub标准目前已经推出3.0版本，它包含如下几个部分：

• EPUB Publications：规定了ePub标准的总体规范和基本语义，好比什么是Spine，什么是Manifest。这样作的目的是为了使不一样出版社的ePub电子书都按照同一标准生产，以保证不一样的阅读器能够正确地解析同一本电子书；
• EPUB Content Documents：规定了ePub的内容标准，如何采用XHTML、 SVG 和 CSS 展现电子书内容；
• EPUB Open Container Format：规定了ePub的封装标准，如何将一组文件打包成一个ePub文件；
• EPUB Media Overlays：规定了文本和音频的同步处理模型，目前大部分ePub电子书中没有涉及该内容。

想要深刻研究ePub标准的同窗点击这里，官方为咱们提供了很是详细的文档。

ePub电子书剖析

下面咱们来看看一本ePub电子书的内部结构，测试电子书点击这里下载。

解压

将电子书的后缀名改成zip，以后用解压软件进行解压，能够获得一个文件夹，以下图所示：

container.xml

打开电子书目录，在META-INF目录下有一个container.xml文件，这是电子书的容器文件（Container），阅读器解析ePub电子书就是从这个文件开始的。

ePub标准对Container有很是严格的规定，主要内容以下：

• ePub电子书根路径下必须存在一个META-INF目录
• ePub电子书在META-INF目录下必须包含一个名称为container.xml的文件（注意：名称不能更改，不然会致使解析失败）
• container.xml文件必须不能加密
• container.xml中必须包含rootfiles标签，rootfiles下必须包含一个或多个rootfile标签，其中必须包含一个full-path属性指向电子书的配置文件，配置文件格式为opf（其实也是xml文件）

但愿深刻研究Container标准的同窗能够点击这里，咱们打开测试电子书的container.xml，内容以下：

<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
  <rootfiles>
    <rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/>
  </rootfiles>
</container>
复制代码

经过rootfile的full-path属性咱们能够了解到在OEBPS目录下存在一个content.opf文件，咱们打开OEBPS目录找到这个文件

经过代码编辑器打开这个文件，下面节选其中的关键内容：

<?xml version="1.0"?>
<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="bookid" version="2.0">
    <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
        <dc:title>Agile Processes in Software Engineering and Extreme Programming</dc:title>
        <dc:creator>Juan Garbajosa, Xiaofeng Wang and Ademar Aguiar</dc:creator>
        <dc:language>En</dc:language>
        <dc:rights></dc:rights>
        <dc:publisher>Springer International Publishing, Cham</dc:publisher>
        <dc:identifier id="bookid">978-3-319-91602-6</dc:identifier>
        <meta name="cover" content="A978-3-319-91602-6_CoverFigure_IMG"/>
        <meta name="epub-converter-version" content="v3.47"/>
    </metadata>

    <manifest>
        <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"/>
        <item id="css1" href="springer_epub.css" media-type="text/css"/>
        <item id="A468350_1_En_1_ChapterPart1" href="A468350_1_En_1_ChapterPart1.html" media-type="application/xhtml+xml"/>
        <item id="A468350_1_En_1_Chapter" href="A468350_1_En_1_Chapter.html" media-type="application/xhtml+xml"/>
        <item id="A468350_1_En_5_Fig1_HTML_IMG" href="A468350_1_En_5_Fig1_HTML.gif" media-type="image/gif"/>
        ...
    </manifest>
    
    <spine toc="ncx">
        <itemref idref="ACoverHTML"/>
        <itemref idref="A468350_1_En_BookFrontmatter_OnlinePDF"/>
        <itemref idref="A468350_1_En_1_ChapterPart1"/>
        <itemref idref="A468350_1_En_1_Chapter"/>
        <itemref idref="A468350_1_En_2_Chapter"/>
        <itemref idref="A468350_1_En_3_ChapterPart2"/>
        ...
    </spine>
    
    <guide>
        <reference type="cover" title="Cover" href="ACoverHTML.html"/>
        <reference type="toc" title="Table of Contents" href="A468350_1_En_BookFrontmatter_OnlinePDF.html#Toc"/>
        <reference type="text" title="Cosmic User Story Standard" href="A468350_1_En_1_Chapter.html"/>
    </guide>
</package>
复制代码

ePub标准规定一个opf文件根标签为package，其中必须包含metadata、manifest和spine，guide、bindings和collection属于可选项

• metadata：电子书的出版信息
• manifest：电子书的资源文件路径和id
• spine：电子书的阅读顺序
• guide：导读信息

metadata

metadata遵循DCMES（Dublin Core Metadata Element Set：都柏林核心元素）的规定，DCMES的目的是为了规范电子信息的描述，详细了解DCMES能够点击这里。ePub规定metadata下必须至少包含如下三个元素：

• dc:title - 电子书标题
• dc:language - 语种
• dc:identifier - 电子出版物的惟一标识，一般是ISBN号（International Standard Book Number：国际标准书号，专门为识别图书等文献而设计的国际编号）

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
        <dc:title>Agile Processes in Software Engineering and Extreme Programming</dc:title>
        <dc:language>En</dc:language>
        <dc:identifier id="bookid">978-3-319-91602-6</dc:identifier>
    </metadata>
复制代码

manifest

manifest存储了电子书资源文件的详尽列表

<manifest>
        <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"/>
        <item id="ACoverHTML" href="ACoverHTML.html" media-type="application/xhtml+xml"/>
</manifest>
复制代码

• item - 表示一个资源
• id - 资源在电子书中的惟一标识
• href - 资源的存储路径
• media-type - 资源的媒体类型

spine

提供电子书阅读的顺序

<spine toc="ncx">
        <itemref idref="ACoverHTML"/>
        <itemref idref="A468350_1_En_BookFrontmatter_OnlinePDF"/>
</spine>
复制代码

• itemref - 表示一个资源
• idref - 表示资源的id，与manifest中的id对应，实际解析过程当中会经过spine的id到manifest中寻找相应的资源，交由阅读器进行展现

ePub标准小结

ePub标准的核心是利用zip技术，将不一样类型的文件打包为一个ePub文件，利用xml技术进行配置管理，结合ePub标准的规定将各种资源文件（如html、css、图片、音频和视频）有序地组织起来，从而保证了各种阅读器解析时的一致性。

总结

本文向你们介绍了电子书的常见格式，并详细讲解了ePub标准。理解ePub标准是开发电子书阅读器的一个前提，你们能够动手尝试将本文提供测试电子书解压，而后进行分析，也能够经过互联网经过其余ePub电子书尝试解析，看看它们是否符合ePub标准。