在使用
PDF.js 显示
PDF 文件时，如果遇到只能展示第一页的问题，通常与页面加载逻辑或
PDF 文档结构有关。以下是一些可能的解决方案：
### 3
.1 使用 `
pdfjsLib
.getDocument` 加载完整文档
确保通过 `getDocument` 方法加载整个
PDF 文件，而不是仅加载第一页。可以通过设置参数来控制是否自动加载所有页面。
```javascript
const loadingTask =
pdfjsLib
.getDocument({
url: 'example
.pdf',
cMapUrl: '/cmaps/',
cMapPacked: true,
verbosity:
pdfjsLib
.VerbosityLevel
.ERRORS
});
```
加载任务完成后，可以通过遍历页码逐个加载页面[^2]。
### 3
.2 手动加载多页并渲染
在加载完文档后，可以手动获取每一页的内容并进行渲染。例如：
```javascript
loadingTask
.promise
.then(
pdf => {
for (let pageNum = 1; pageNum <=
pdf.numPages; pageNum++) {
pdf.getPage(pageNum)
.then(page => {
const viewport = page
.getViewport({ scale: 1
.5 });
const canvas = document
.createElement('canvas');
canvas
.id = `the-canvas${pageNum}`;
canvas
.height = viewport
.height;
canvas
.width = viewport
.width;
const context = canvas
.getContext('2d');
const renderContext = {
canvasContext: context,
viewport: viewport
};
page
.render(renderContext);
document
.body
.appendChild(canvas); // 将 canvas 添加到 DOM 中
});
}
});
```
该方法允许按需加载每个页面，并且可以在移动端优化性能，避免一次性加载过多内容导致内存不足问题[^3]。
### 3
.3 清理未使用的页面资源
为了避免内存占用过高，可以在页面卸载时清理不再需要的
PDF 页面资源：
```javascript
function unloadPage(pageNum) {
const canvas = document
.getElementById(`the-canvas${pageNum}`);
if (canvas) {
const page = canvas
._
pdfPage;
if (page) {
page
.cleanup();
page
._destroy();
}
canvas
.remove();
}
}
```
此函数可在页面滚动或切换时调用，以释放不必要的资源，从而提升整体性能[^3]。
### 3
.4 确保正确设置缩放选项
如果希望用户能够选择不同的缩放比例，应确保 HTML 中的缩放选项元素包含正确的选中状态：
```html
<div id="scaleSelectContainer">
<option id="pageActualOption" selected="selected">实际大小</option>
<option id="pageFitOption">适合页面</option>
<option id="pageWidthOption">适应宽度</option>
</div>
```
这样可以保证每次加载
PDF 时默认显示第一页并保持当前缩放设置[^2]。
### 3
.5 后端配合分片加载
对于大体积
PDF 文件，前端可以通过请求头中的 `Range` 字段向后端请求特定范围的数据流，实现分片加载。这种方式可以显著减少首次加载时间，并防止浏览器因内存不足而崩溃。
```http
GET /api/
pdf/example HTTP/1
.1
Host: example
.com
Range: bytes=0-1023
```
后端根据请求头返回相应的文件片段，前端再将其传递给
PDF.js 进行处理和渲染[^1]。
本文介绍如何通过注释代码来禁用在Text Layer Builder中对文本的定位匹配功能。
扫一扫
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
