Web閱讀器開發系列教程（入門篇）

摘要： 最近我在慕課網釋出了兩門關於Web閱讀應用開發的課程，採用Vue全家桶開發。免費課是入門級課程，初步實現了一個閱讀器。實戰課是進階課程，實現了一個高效能的網際網路閱讀應用。兩個專案都採用自適應佈局，同時支援PC端和移動端，想要系統提升前端技能的同學不要錯過。 免費課《快速入門Web閱讀器...

最近我在慕課網釋出了兩門關於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標準。