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標準。