React引入Pdfjs-dist实现指定页PDF转图片需求

重点强调pdfjs-dist的版本，本篇文章是以2.5.207版本为示例，不同的版本引入方式不同

"pdfjs-dist": "2.5.207"

PdfToImage

函数作用：传入一个PDF File文件和指定页码，将指定页码转化为图片后并返回，引入方式很重要，因为引入方式的问题卡了一下午时间

const pdfjsLib = require('pdfjs-dist/es5/build/pdf.js');

// 其他方式引入，非react的方式
// pdfjsLib.GlobalWorkerOptions.workerSrc = `/js/pdf.worker.js`;

// react中的引入方式
import workerSrc from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;

interface PdfToImageResult {
  image: string | null;
  totalPages: number;
}

const pdfToImage = async (file: File, pageNumber: number): Promise<PdfToImageResult> => {
  if (!file || pageNumber <= 0) return { image: null, totalPages: 0 };

  try {
    // Load the PDF file using pdfjs-dist
    const pdfBytes = await file.arrayBuffer();
    const loadingTask = pdfjsLib.getDocument({ data: new Uint8Array(pdfBytes) });
    const pdf = await loadingTask.promise;
    const pageCount = pdf.numPages;

    if (pageNumber > pageCount) {
      console.error('Page number exceeds total pages in PDF');
      return { image: null, totalPages: pageCount };
    }

    // Render the specified page to a canvas
    const page = await pdf.getPage(pageNumber);
    const viewport = page.getViewport({ scale: 1.5 });
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    if (!context) {
      throw new Error('Canvas context not available');
    }
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext = {
      canvasContext: context,
      viewport: viewport,
    };
    await page.render(renderContext).promise;

    // Convert canvas to image
    const imgData = canvas.toDataURL('image/png');
    return { image: imgData, totalPages: pageCount };
  } catch (error) {
    console.error('Error converting PDF to image:', error);
    return { image: null, totalPages: 0 };
  }
};

export default pdfToImage;