React Native中按HTML标签开闭切片字符串以实现PDF分页

问题根源 #

直接用slice(0,500)这类固定索引切割HTML字符串，会把标签（比如<p style="xxx"）劈成两半，导致DOM结构破坏、样式失效，核心原因是没遵循HTML的标签闭合规则。

解决方案：基于DOM节点的结构化切片 #

1. 解析HTML为可操作的DOM节点 #

用htmlparser2（React Native兼容的轻量解析库）把原始HTML转成DOM节点数组，精准识别每个完整元素：

import { parseDOM } from 'htmlparser2';

// 原始HTML字符串（示例）
const rawHtml = `<p style="margin: 0px 0px 15px; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, "</p><h3 style="margin: 15px 0px; padding: 0px; font-size: 14px; color: rgb(0, 0, 0); font-family: &quot;Open Sans&quot;, Arial, sans-serif;">Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>`;

// 转成DOM节点数组
const domElements = parseDOM(rawHtml);

2. 按单页容量组装完整元素 #

根据PDF单页可容纳的内容量（比如字符数、预估渲染高度），逐个累加完整DOM元素，接近上限时就封成一页：

import { serialize } from 'dom-serializer';

// 单页预估容量（根据实际PDF尺寸、字体调整）
const PAGE_CHAR_LIMIT = 500;
const pdfPages = [];
let currentPageElements = [];
let currentCharCount = 0;

domElements.forEach(el => {
  const elHtml = serialize(el);
  const elCharLength = elHtml.length;

  // 加入当前元素会超容量时，先存现有页面
  if (currentCharCount + elCharLength > PAGE_CHAR_LIMIT && currentPageElements.length > 0) {
    pdfPages.push(serialize(currentPageElements));
    currentPageElements = [];
    currentCharCount = 0;
  }

  // 加入当前元素
  currentPageElements.push(el);
  currentCharCount += elCharLength;
});

// 处理最后一批元素
if (currentPageElements.length > 0) {
  pdfPages.push(serialize(currentPageElements));
}

3. 添加分页符 #

给每个页面的HTML片段添加CSS分页样式，最后一页不需要：

const paginatedHtml = pdfPages.map((page, index) => {
  const pageStyle = index !== pdfPages.length - 1 ? 'page-break-after: always;' : '';
  return `<div style="${pageStyle}">${page}</div>`;
});

4. 特殊处理：超长单个元素 #

如果遇到大段文本的单个标签（比如超长<p>），可以拆分文本内容但保留标签包裹：

// 示例：拆分长段落
const longPara = domElements.find(el => el.tagName === 'p');
const textContent = longPara.children[0].data;
// 按300字符拆分文本
const textChunks = textContent.match(/.{1,300}/g) || [textContent];

// 生成多个完整的p标签
const splitParas = textChunks.map(chunk => ({
  tagName: 'p',
  attribs: longPara.attribs,
  children: [{ type: 'text', data: chunk }]
}));

// 把拆分后的元素替换原长段落，再按步骤2处理
domElements.splice(domElements.indexOf(longPara), 1, ...splitParas);

关键提醒 #

• 绝对不要直接切割原始HTML字符串，必须基于解析后的DOM节点操作
• 单页容量数值需要实际调试，根据PDF的尺寸、字体大小、行高调整，避免溢出或留白
• 选择React Native兼容的HTML解析/序列化库，htmlparser2和dom-serializer都是轻量且无依赖的

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