如何在React/.NET Core中加载线性化PDF并实现渐进式渲染？

前提：确保PDF是线性化格式 #

线性化PDF是PDF文件本身的一种优化结构，能让浏览器从文件开头逐步加载并渲染内容。你可以用Ghostscript工具将普通PDF转换为线性化版本，执行以下命令：

gs -dSAFER -dBATCH -dNOPAUSE -sDEVICE=pdfwrite -dPDFSETTINGS=/prepress -dLinearized=true -sOutputFile=linearized-output.pdf input.pdf

React中基于pdfjs-dist的渐进式渲染实现 #

pdfjs-dist（Mozilla官方的PDF解析库）原生支持线性化PDF的流式加载，下面是具体实现步骤：

1. 安装依赖 #

npm install pdfjs-dist
# 或
yarn add pdfjs-dist

2. 组件示例代码 #

import React, { useState, useEffect, useRef } from 'react';
import * as PDFJS from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry';

// 配置PDFJS的worker路径
PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.entry.js';

const ProgressivePdfViewer = ({ pdfUrl }) => {
  const [pdfDoc, setPdfDoc] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);
  const canvasRef = useRef(null);

  useEffect(() => {
    const loadPdf = async () => {
      // 启用流式加载配置
      const loadingTask = PDFJS.getDocument({
        url: pdfUrl,
        disableAutoFetch: false,
        enableStreaming: true,
        disableRange: false,
      });

      const doc = await loadingTask.promise;
      setPdfDoc(doc);
      renderPage(doc, currentPage);
    };

    if (pdfUrl) loadPdf();
  }, [pdfUrl]);

  const renderPage = async (doc, pageNum) => {
    const page = await doc.getPage(pageNum);
    const viewport = page.getViewport({ scale: 1.5 });
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');

    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // 渲染页面，支持渐进式加载
    const renderContext = {
      canvasContext: context,
      viewport: viewport,
    };
    const renderTask = page.render(renderContext);
    await renderTask.promise;
  };

  if (!pdfDoc) return <div>加载中...</div>;

  return (
    <div>
      <canvas ref={canvasRef} />
      <div>
        <button
          onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
          disabled={currentPage === 1}
        >
          上一页
        </button>
        <span>第 {currentPage} 页 / 共 {pdfDoc.numPages} 页</span>
        <button
          onClick={() => setCurrentPage(prev => Math.min(prev + 1, pdfDoc.numPages))}
          disabled={currentPage === pdfDoc.numPages}
        >
          下一页
        </button>
      </div>
    </div>
  );
};

export default ProgressivePdfViewer;

关键注意事项 #

• 服务器支持Range请求：你的PDF文件服务器必须支持HTTP Range头，这样浏览器才能分段下载线性化PDF的内容，否则会触发全量下载，无法实现流式加载。
• PDF文件验证：可以用在线工具或Adobe Acrobat检查PDF是否为线性化格式，非线性化的PDF无法实现渐进式渲染。
• 性能优化：对于大篇幅PDF，建议只渲染当前可见的页面，避免一次性渲染所有页面导致内存占用过高。

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