PDF.js一键搞定pdf在线浏览卡顿问题

2022-12-18 07:21:12

按需加载 PDF 文件：优化在线浏览体验

随着互联网的迅猛发展，PDF 文件因其安全性、兼容性和易共享性而在各个领域得到广泛应用。然而，庞大文件在线浏览时常常面临加载缓慢的问题，影响用户体验。本文介绍了一种使用 PDF.js 实现按需分片加载 PDF 文件的方法，有效解决这一难题。

按需分片加载原理

传统方法一次性加载整个 PDF 文件，导致浏览器内存负担过重，影响加载速度。而按需分片加载则不同：

前端发送请求时，指定需要加载的范围和大小。
后端返回对应范围内的 PDF 文件流。
前端使用 PDF.js 将返回的流渲染到页面。

这种方式只加载用户当前需要的部分，大大降低了浏览器内存消耗，从而加快加载速度。

解决首次加载问题

首次加载时，如果自动加载全部分片，浏览器仍可能内存不足。为此，需要限制首次加载的分片数量，例如 10 个。当用户滚动页面时，再动态加载更多分片。

优势与代码示例

按需分片加载带来的优势显而易见：

提升 PDF 文件在线浏览速度
降低浏览器内存消耗
改善用户体验

以下代码示例展示了前端实现：

// 初始加载分片数量
const initialLoadCount = 10;

// 动态加载更多分片
const loadMorePdf = async () => {
  // 获取当前已加载的分片范围
  const currentRange = document.documentElement.scrollHeight;

  // 每次加载 1MB 数据
  const size = 1024 * 1024;

  // 请求对应范围的 PDF 文件流
  const stream = await fetchPdfStream(url, currentRange, size);

  // 渲染 PDF 文件流到页面
  await renderPdf(stream);
};

// 滚动事件监听器
window.addEventListener('scroll', () => {
  // 当滚动到底部时加载更多分片
  if ((window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight) {
    loadMorePdf();
  }
});

// 加载 PDF 文件
const loadPdf = async (url) => {
  // 获取初始加载的分片流
  const stream = await fetchPdfStream(url, 0, initialLoadCount * size);

  // 渲染初始加载的分片
  await renderPdf(stream);

  // 加载更多分片
  loadMorePdf();
};