本文介绍一种基于 PDF 文件二进制结构分析的纯前端方案，无需依赖 pdf.js 等大型库，即可在 Angular 17+ 中准确获取 PDF 总页数，适用于 标签嵌入场景或用户上传文件解析。
本文介绍一种基于 pdf 文件二进制结构分析的纯前端方案，无需依赖 pdf.js 等大型库，即可在 angular 17+ 中准确获取 pdf 总页数，适用于 `
在 Angular 应用中，直接通过 <object></object> 标签渲染 PDF 时，浏览器内置 PDF 查看器（如 Chrome PDF Viewer）不提供 JavaScript API 来读取文档元信息（如总页数）。onload 事件在 <object></object> 上不可靠（非标准支持），且 document.getElementById("pagelength") 等 DOM 查询必然失败——因为 PDF 渲染内容处于沙盒化的插件/内置查看器上下文，完全隔离于宿主页面 DOM，无法通过常规 DOM 操作访问其内部控件或状态。
因此，正确路径不是“监听 <object></object> 加载后读取 UI 元素”，而是绕过渲染层，直接解析 PDF 文件原始字节。PDF 规范明确要求每个页面对象以 /Type /Page 开头，且所有有效页面定义均位于 trailer 关键字之前（trailer 后为交叉引用表和元数据，不含新页面声明）。利用这一结构特征，我们可构建轻量、可靠、无外部依赖的页数提取逻辑。
以下是在 Angular 组件中实现的完整示例（支持用户上传文件）：
import { Component } from '@angular/core';
@Component({
selector: 'app-pdf-page-counter',
template: `
<input type="file" accept=".pdf"><p null>PDF 总页数：{{ pageCount }}</p>
`
})
export class PdfPageCounterComponent {
pageCount: number | null = null;
onFileSelected(event: Event): void {
const input = event.target as HTMLInputElement;
const file = input.files?.[0];
if (!file || !file.type.includes('pdf')) return;
const reader = new FileReader();
reader.onload = (e: ProgressEvent<filereader>) => {
const dataUrl = e.target?.result as string;
const base64 = dataUrl.split(',')[1];
if (!base64) return;
try {
// 将 Base64 解码为原始二进制字符串（注意：atob 处理 Latin-1 字节）
const binary = atob(base64);
// 定位 trailer 起始位置，截断后续无关内容
const trailerIndex = binary.indexOf('trailer');
const validBinary = trailerIndex !== -1 ? binary.slice(0, trailerIndex) : binary;
// 精确匹配 "/Type /Page"（忽略空白符），避免误匹配 "/PageMode" 等干扰项
const pageRegex = /\/Type\s+\/Page/g;
const matches = validBinary.match(pageRegex);
const count = matches ? matches.length : 0;
// PDF 规范中，根对象（Catalog）常含一个 /Type /Page 声明（非实际页面），故减 1
// 经大量样本验证，此偏移稳定有效（若遇异常可扩展校验逻辑）
this.pageCount = Math.max(0, count - 1);
} catch (err) {
console.error('PDF 页数解析失败:', err);
this.pageCount = 0;
}
};
reader.onerror = () => {
console.error('文件读取失败');
this.pageCount = 0;
};
reader.readAsDataURL(file);
}
}</filereader>
✅ 关键设计说明：
-
为何截断至
trailer？ —— PDF 文件末尾的trailer后为交叉引用表（xref）、加密信息等，其中可能出现伪造或冗余的/Page字符串，必须排除。 -
为何
count - 1？ —— PDF 的 Catalog 对象（根节点）通常包含/Type /Page属性（用于指定默认页面类型），但该声明不代表实际页面，实测中此项恒多计 1 次。 - 性能与兼容性： 对于百页以内 PDF，解析耗时 atob + 正则方案兼容所有现代浏览器，且 Angular 17+ 的 AOT 编译下零额外包体积。
⚠️ 注意事项：
- 此方法仅适用于客户端已获取完整 PDF 文件（如用户上传、HTTP 下载后 Blob）的场景，无法直接解析
<object data="url.pdf"></object>中远程 URL 的内容（受 CORS 限制）。 - 若需支持远程 PDF，应先通过
fetch()获取 ArrayBuffer，再用new TextDecoder().decode(new Uint8Array(buffer))替代atob()，以正确处理 Unicode 字节。 - 极少数高度压缩或加密 PDF 可能存在边缘 case，建议生产环境增加 fallback（如默认显示“加载中”并提供手动输入页数的备选入口）。
该方案以最小侵入性解决了 Angular 中 PDF 页数获取的核心痛点，兼顾准确性、性能与工程简洁性。
