把 EPUB 拖進這裡
或者
你會看到什麼
- 讀——書排出來的樣子。直排或橫排由書自己決定, 翻頁、跳章、字級、行高、邊界、單欄雙欄、主題都可以改。
- 檢查——frond 從這本書讀到的事實。EPUB 版本、頁面推進方向、目錄讀自哪一份導覽文件、封面用哪種寫法宣告、 manifest 裡有哪幾項其實不在包裡。
這一頁是純瀏覽器 client 實作:整個流程跑在這個分頁裡,沒有伺服器
參與。EpubBook.open() 收的是位元組,frond
本身沒有任何下載或上傳的程式碼路徑。
用起來長這樣
<div id="viewer" style="height: 100dvh"></div>
<script type="module">
import { EpubBook } from "./frond/epub/index.js";
import { Renderer } from "./frond/renderer/index.js";
const book = await EpubBook.open(await file.arrayBuffer());
const renderer = await Renderer.attach(
book,
document.getElementById("viewer"),
{ on: { relocate: (at) => console.log(at.page, at.pageCount) } },
);
</script>
沒有打包器、沒有執行期相依。這一頁本身就是這段程式碼跑起來的樣子 ——app.js 是它的完整版。