超全模态模型 × Harness 升级，升级解锁 ArkClaw，最新支持 DeepSeek-V4 系列与 GLM-5.1
你之前遇到的两个问题本质是Angular的作用域限制和PDF嵌入内容的访问限制：
onload="cargue()"
cargue()
document.getElementById
如果一定要用标签，先通过ViewChild获取元素，再手动绑定load事件：在组件模板里给加模板引用： <object #pdfObject data="your-pdf-url.pdf" type="application/pdf" width="100%" height="600px"></object> 在组件类里获取元素并绑定load事件：import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-pdf-viewer', templateUrl: './pdf-viewer.component.html', standalone: true }) export class PdfViewerComponent implements AfterViewInit { @ViewChild('pdfObject') pdfObject!: ElementRef<HTMLObjectElement>; ngAfterViewInit(): void { this.pdfObject.nativeElement.addEventListener('load', () => { // 这里尝试访问内部文档，但成功率极低，因为浏览器会限制对PDF嵌入内容的访问 try { const pdfDoc = this.pdfObject.nativeElement.contentDocument; // 不同浏览器的PDF渲染器结构不一样，这个选择器不一定生效 const pageInfo = pdfDoc?.querySelector('.some-page-selector'); if (pageInfo) { const totalPages = pageInfo.textContent?.split('/')[1]; console.log('总页数：', totalPages); } } catch (err) { console.error('无法访问PDF内部内容：', err); } }); } } 注意：这个方案很不稳定，因为不同浏览器（Chrome、Firefox、Edge）的PDF渲染DOM结构完全不同，而且很多浏览器会阻止脚本访问嵌入的PDF文档，大概率获取不到内容。方案二：用PDF.js（推荐，稳定可控） #直接用Mozilla的PDF.js库加载PDF，能直接获取文档的总页数，完全不受浏览器渲染差异影响：安装PDF.js：npm install pdfjs-dist 组件代码示例：import { Component, OnInit } from '@angular/core'; import * as pdfjsLib from 'pdfjs-dist'; import { pdfjsWorker } from 'pdfjs-dist/build/pdf.worker.entry'; // 指定Worker路径 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker; @Component({ selector: 'app-pdf-viewer', template: ` <div id="pdf-container"></div> <p>总页数：{{ totalPages }}</p> `, standalone: true }) export class PdfViewerComponent implements OnInit { totalPages = 0; ngOnInit(): void { const pdfUrl = 'your-pdf-url.pdf'; // 加载PDF文档 pdfjsLib.getDocument(pdfUrl).promise.then((pdfDoc) => { this.totalPages = pdfDoc.numPages; // 可选：渲染第一页到页面 pdfDoc.getPage(1).then((page) => { const container = document.getElementById('pdf-container'); if (container) { const viewport = page.getViewport({ scale: 1.5 }); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; container.appendChild(canvas); page.render({ canvasContext: ctx, viewport }); } }); }).catch((err) => { console.error('加载PDF失败：', err); }); } } 这个方案完全可控，不管哪个浏览器都能稳定获取总页数，还能自定义PDF的渲染样式和交互，比标签灵活得多。内容的提问来源于stack exchange，提问作者Jesus Zapata
<object #pdfObject data="your-pdf-url.pdf" type="application/pdf" width="100%" height="600px"></object>
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-pdf-viewer', templateUrl: './pdf-viewer.component.html', standalone: true }) export class PdfViewerComponent implements AfterViewInit { @ViewChild('pdfObject') pdfObject!: ElementRef<HTMLObjectElement>; ngAfterViewInit(): void { this.pdfObject.nativeElement.addEventListener('load', () => { // 这里尝试访问内部文档，但成功率极低，因为浏览器会限制对PDF嵌入内容的访问 try { const pdfDoc = this.pdfObject.nativeElement.contentDocument; // 不同浏览器的PDF渲染器结构不一样，这个选择器不一定生效 const pageInfo = pdfDoc?.querySelector('.some-page-selector'); if (pageInfo) { const totalPages = pageInfo.textContent?.split('/')[1]; console.log('总页数：', totalPages); } } catch (err) { console.error('无法访问PDF内部内容：', err); } }); } }
注意：这个方案很不稳定，因为不同浏览器（Chrome、Firefox、Edge）的PDF渲染DOM结构完全不同，而且很多浏览器会阻止脚本访问嵌入的PDF文档，大概率获取不到内容。
直接用Mozilla的PDF.js库加载PDF，能直接获取文档的总页数，完全不受浏览器渲染差异影响：
npm install pdfjs-dist
import { Component, OnInit } from '@angular/core'; import * as pdfjsLib from 'pdfjs-dist'; import { pdfjsWorker } from 'pdfjs-dist/build/pdf.worker.entry'; // 指定Worker路径 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker; @Component({ selector: 'app-pdf-viewer', template: ` <div id="pdf-container"></div> <p>总页数：{{ totalPages }}</p> `, standalone: true }) export class PdfViewerComponent implements OnInit { totalPages = 0; ngOnInit(): void { const pdfUrl = 'your-pdf-url.pdf'; // 加载PDF文档 pdfjsLib.getDocument(pdfUrl).promise.then((pdfDoc) => { this.totalPages = pdfDoc.numPages; // 可选：渲染第一页到页面 pdfDoc.getPage(1).then((page) => { const container = document.getElementById('pdf-container'); if (container) { const viewport = page.getViewport({ scale: 1.5 }); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; container.appendChild(canvas); page.render({ canvasContext: ctx, viewport }); } }); }).catch((err) => { console.error('加载PDF失败：', err); }); } }
这个方案完全可控，不管哪个浏览器都能稳定获取总页数，还能自定义PDF的渲染样式和交互，比标签灵活得多。内容的提问来源于stack exchange，提问作者Jesus Zapata
内容的提问来源于stack exchange，提问作者Jesus Zapata
超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起
模型再升级,30秒超长叙事, 模态参考扩容
模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列
超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列
大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠
