PSPDFKit是否支持React+TypeScript集成？集成报错求助

核心结论 #

PSPDFKit完全支持 TypeScript，官方 npm 包内置了完整的类型定义，无需额外安装第三方类型包。

集成步骤与报错排查 #

1. 正确安装依赖

确保已通过 npm/yarn 安装最新版 PSPDFKit：

npm install pspdfkit
# 或
yarn add pspdfkit

2. React + TS 组件示例

以下是包含初始化、矩形绘制、实例清理的完整组件示例：

import { useEffect, useRef } from 'react';
import PSPDFKit from 'pspdfkit';

interface PDFViewerProps {
  pdfUrl: string;
  licenseKey: string;
}

export const PDFViewer: React.FC<PDFViewerProps> = ({ pdfUrl, licenseKey }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const instanceRef = useRef<PSPDFKit.Instance | null>(null);

  useEffect(() => {
    if (!containerRef.current || instanceRef.current) return;

    // 初始化 PSPDFKit 实例
    PSPDFKit.load({
      container: containerRef.current,
      document: pdfUrl,
      licenseKey,
    }).then((instance) => {
      instanceRef.current = instance;

      // 绘制矩形注释（匹配你的 POC 需求）
      const rectangleAnnotation = new PSPDFKit.Annotations.RectangleAnnotation({
        pageIndex: 0,
        boundingBox: new PSPDFKit.Geometry.Rect({ left: 100, top: 100, width: 200, height: 150 }),
        fillColor: PSPDFKit.Color.RED.withAlpha(0.3),
        borderColor: PSPDFKit.Color.RED,
      });

      instance.create(rectangleAnnotation);
    });

    // 组件卸载时清理实例，避免内存泄漏
    return () => {
      if (instanceRef.current) {
        instanceRef.current.destroy();
        instanceRef.current = null;
      }
    };
  }, [pdfUrl, licenseKey]);

  return <div ref={containerRef} style={{ width: '100%', height: '80vh' }} />;
};

3. 常见报错排查

• 模块导入/类型识别错误（对应你提供的第一张截图）：
  检查 tsconfig.json 配置，确保以下项设置正确：

  {
    "compilerOptions": {
      "moduleResolution": "node16",
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true
    }
  }
  

  若使用 Vite 或 Webpack，确保构建工具能正确解析 PSPDFKit 的 ES 模块。

• DOM 容器初始化失败（对应你提供的第二张截图）：
  必须确保容器元素已挂载到 DOM 后再调用 PSPDFKit.load，上述示例通过 useEffect 配合 ref 保证了这一点，避免在组件挂载前执行初始化。

4. 静态资源配置

PSPDFKit 需要加载字体、worker 等静态资源，需在构建工具中配置：

• Vite：在 vite.config.ts 中添加复制静态资源的逻辑：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import { copyFileSync } from 'fs';
  import { join } from 'path';
  
  export default defineConfig({
    plugins: [
      react(),
      {
        name: 'copy-pspdfkit-assets',
        buildStart() {
          const src = join(__dirname, 'node_modules', 'pspdfkit', 'dist', 'pspdfkit-lib');
          const dest = join(__dirname, 'public', 'pspdfkit-lib');
          copyFileSync(src, dest, { recursive: true });
        },
      },
    ],
  });
  

• Webpack：使用 copy-webpack-plugin 复制 pspdfkit-lib 目录到输出目录。

额外提示 #

官方提供了专门的 React + TypeScript 集成指南，涵盖许可密钥配置、高级注释操作等内容，可直接在 PSPDFKit 官方文档中搜索获取。

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