React 应用程序中 pdfjs-dist 的附加加载程序

在 React 应用程序中，如果你想要加载和显示 PDF 文件，pdfjs-dist 是一个非常有用的库。pdfjs-dist 是 Mozilla 开发的 JavaScript PDF 渲染库，它可以直接在浏览器中渲染 PDF 文件，无需使用任何插件或外部服务。为了在 React 应用程序中使用 pdfjs-dist，我们可以使用附加加载程序。

bash
npm install pdfjs-dist

bash
yarn add pdfjs-dist

jsx
import { pdfjs } from 'pdfjs-dist';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

jsx
import React, { useState, useEffect } from 'react';
const PdfViewer = ({ url }) => {
  const [pdf, setPdf] = useState(null);
  useEffect(() => {
    const loadPdf = async () => {
      const loadingTask = pdfjs.getDocument(url);
      const pdfInstance = await loadingTask.promise;
      setPdf(pdfInstance);
    };
    loadPdf();
  }, [url]);
  const renderPdfPages = () => {
    if (pdf) {
      const pages = [];
      for (let i = 1; i <= pdf.numPages; i++) {
        pages.push(
          
            
          
        );
      }
      return pages;
    }
    return null;
  };
  return (
    
      {renderPdfPages()}
    
  );
};
export default PdfViewer;