如何创建分页器实现逐页浏览任意HTML的浏览器原生电子书阅读体验

一、无依赖原生实现思路 #

核心逻辑完全围绕「不截断文本行、整页切换无动画」的需求开发，整体代码量可控制在100行以内：

• 先固定视口<div>的宽高、字体、行高、边距等所有样式参数，避免后续样式变更导致分页计算偏移
• 调用DOM API getClientRects()批量获取所有内容段落的每一行文本的实际渲染坐标，按行粒度存储所有内容
• 预计算单页可容纳的最大行数：从第一行开始累加行高，直到累计高度超过视口可用高度，停止计数得到单页行数上限
• 提前把所有行按单页行数上限分组缓存到数组中，翻页时直接将对应分组的行内容批量写入视口容器即可，不需要做滚动操作，天然无动画、无行截断问题
• 可选优化：监听窗口resize事件，触发重新计算分页逻辑，适配视口尺寸变化

核心代码片段参考：

// 提前缓存所有行内容
const lines = []
const contentWrapper = document.querySelector('#raw-content')
// 遍历所有文本节点，按行拆分
contentWrapper.querySelectorAll('p').forEach(p => {
  const rects = p.getClientRects()
  let currentLineText = ''
  let lastTop = rects[0].top
  Array.from(p.childNodes).forEach(node => {
    if (node.nodeType === 3) {
      // 拆分文本到行，匹配对应rect的top坐标，最终把每行内容push到lines数组
    }
  })
})
// 分页缓存
const pages = []
let currentPage = []
let currentHeight = 0
const pageHeight = document.querySelector('#viewport').clientHeight
const lineHeight = parseFloat(getComputedStyle(contentWrapper).lineHeight)
lines.forEach(line => {
  if (currentHeight + lineHeight > pageHeight) {
    pages.push(currentPage)
    currentPage = [line]
    currentHeight = lineHeight
    return
  }
  currentPage.push(line)
  currentHeight += lineHeight
})
pages.push(currentPage)
// 翻页逻辑
function turnToPage(index) {
  const viewport = document.querySelector('#viewport')
  viewport.innerHTML = pages[index].map(line => `<p>${line}</p>`).join('')
}

二、轻量现成框架 #

如果不需要从零开发，可直接使用以下成熟的轻量库：

• Paged.js：符合W3C分页媒体标准的轻量渲染库，压缩后仅30KB左右，无需复杂配置，引入后会自动按行边界对内容做分页处理，支持自定义视口尺寸，翻页直接切换分页节点，完全符合无动画、无行截断的需求
• Turn.js：主打模拟实体书翻页效果的库，可通过配置关闭翻页动画，内置自动分页逻辑，自动规避文本行截断问题，适合后续想要扩展翻页动效的场景

三、浏览器端ePUB阅读器方案 #

如果后续需要扩展支持标准ePUB格式、章节、目录等能力，可选用以下方案：

• Epub.js：纯前端ePUB解析渲染库，支持自定义视口参数、关闭滚动动画、强制整页翻页，原生处理分页行截断问题，现有规整排版的HTML内容也可直接封装为最小粒度的ePUB文件接入
• 可直接使用Readium开源项目的核心渲染模块，剥离冗余UI组件，仅保留分页渲染能力，性能表现更优

内容的提问来源于stack exchange，提问作者Mike Burr