TypeScript中PDF转图片方案求助：现有库报错无法使用

TypeScript环境下PDF转图片并在标签展示解决方案 #

适配TypeScript的库选择 #

优先推荐pdfjs-dist——它原生提供TypeScript类型定义，只要用法正确就能避免你遇到的util.js报错。如果需要更简洁的React集成，可以用@react-pdf/viewer（封装自pdfjs-dist）。

错误排查（针对你遇到的util.js报错） #

• 检查版本兼容性：若使用最新版pdfjs-dist报错，尝试降级到v3.x版本，部分旧项目与新版worker配置存在兼容问题
• 确保Worker路径配置正确：不要手动引入Worker文件，直接使用官方提供的入口文件
• 验证TS配置：tsconfig.json中需将moduleResolution设为node或bundler，target设为ES6+

TypeScript+React示例代码（pdfjs-dist原生实现） #

1. 安装依赖 #

npm install pdfjs-dist @types/pdfjs-dist

2. 核心实现 #

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

// 配置Worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

interface PdfToImageProps {
  pdfUrl: string;
}

const PdfToImage: React.FC<PdfToImageProps> = ({ pdfUrl }) => {
  const [imageUrls, setImageUrls] = useState<string[]>([]);

  useEffect(() => {
    const convertPdf = async () => {
      if (!pdfUrl) return;
      try {
        const pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
        const pageImages: string[] = [];

        for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
          const page = await pdfDoc.getPage(pageNum);
          // 设置缩放比例，值越大图片越清晰
          const viewport = page.getViewport({ scale: 2 });
          
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          canvas.width = viewport.width;
          canvas.height = viewport.height;

          // 渲染PDF页面到Canvas
          await page.render({
            canvasContext: ctx!,
            viewport,
          }).promise;

          // 转换为Base64格式，用于<img>标签的src属性
          const base64Url = canvas.toDataURL('image/png');
          pageImages.push(base64Url);
        }

        setImageUrls(pageImages);
      } catch (err) {
        console.error('PDF转图片失败:', err);
      }
    };

    convertPdf();
  }, [pdfUrl]);

  return (
    <div className="pdf-images-container">
      {imageUrls.map((url, idx) => (
        <img
          key={idx}
          src={url}
          alt={`PDF页面 ${idx + 1}`}
          style={{ maxWidth: '100%', marginBottom: '1rem' }}
        />
      ))}
    </div>
  );
};

export default PdfToImage;

备选方案：使用@react-pdf/viewer简化展示 #

如果仅需展示PDF而非强制转成标签，这个封装库更易用：

1. 安装依赖 #

npm install @react-pdf/viewer

2. 实现代码 #

import React from 'react';
import { Viewer } from '@react-pdf/viewer';
import '@react-pdf/viewer/lib/styles/index.css';

interface PdfViewerProps {
  pdfUrl: string;
}

const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
  return (
    <div style={{ height: '80vh', width: '100%' }}>
      <Viewer fileUrl={pdfUrl} />
    </div>
  );
};

export default PdfViewer;

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