React 18.2中react-google-docs-viewer无法使用，需登录？求替代库

关于react-google-docs-viewer无法运行的原因及解决 #

react-google-docs-viewer本质是封装了Google官方的Docs Viewer嵌入功能，它本身不需要登录，但无法运行大概率是这些原因：

• 文件链接非公开可访问：Google Docs Viewer只能读取无权限限制的公开文件，私有云、需登录验证的链接会直接失效。
• 格式支持限制：该工具仅支持PDF、Word、Excel、PPT、图片这类静态文档，视频格式不在Google Docs Viewer的支持范围内，无法直接渲染。
• 库兼容性问题：react-google-docs-viewer已多年未更新，对React 18的新特性（如Strict Mode、并发渲染）兼容性较差，这是最常见的失效原因。
• 地区访问限制：部分地区无法直接访问Google服务，导致嵌入的Viewer加载失败。

如果要继续使用该库，先确认文件链接是公开的且格式在支持列表内，同时可尝试关闭React的Strict Mode测试是否能正常运行。

React 18.2可用的替代库 #

根据不同文件类型，推荐这些维护活跃、兼容React 18的库：

1. PDF文件查看：react-pdf #

基于Mozilla的pdf.js，轻量且自定义性强，支持分页、缩放、搜索等功能。
示例代码：

import { useState } from 'react';
import { Document, Page } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
import 'react-pdf/dist/esm/Page/TextLayer.css';

function PDFViewer() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  return (
    <div>
      <Document
        file="https://github.com/mozilla/pdf.js/raw/master/examples/helloworld/helloworld.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>第 {pageNumber} 页 / 共 {numPages} 页</p>
    </div>
  );
}

2. 多格式文档（Word/Excel/PPT）：react-doc-viewer #

支持多种办公文档格式，内部会根据文件类型自动选择合适的渲染方式，也支持自定义渲染器。
示例代码：

import DocViewer, { DocViewerRenderers } from "react-doc-viewer";

function MultiDocViewer() {
  const docs = [
    { uri: "https://example.com/sample.docx" },
    { uri: "https://example.com/sample.xlsx" },
    { uri: "https://example.com/sample.pdf" },
  ];

  return (
    <DocViewer
      documents={docs}
      pluginRenderers={DocViewerRenderers}
      style={{ height: "780px", width: "600px" }}
    />
  );
}

3. 图片查看：react-image-lightbox #

专注于图片查看，支持缩放、旋转、切换、全屏等功能，适合图片画廊场景。
示例代码：

import { useState } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';

function ImageViewer() {
  const [isOpen, setIsOpen] = useState(false);
  const [photoIndex, setPhotoIndex] = useState(0);
  const images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
  ];

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>查看图片</button>
      {isOpen && (
        <Lightbox
          mainSrc={images[photoIndex]}
          nextSrc={images[(photoIndex + 1) % images.length]}
          prevSrc={images[(photoIndex + images.length - 1) % images.length]}
          onCloseRequest={() => setIsOpen(false)}
          onMovePrevRequest={() =>
            setPhotoIndex((photoIndex + images.length - 1) % images.length)
          }
          onMoveNextRequest={() =>
            setPhotoIndex((photoIndex + 1) % images.length)
          }
        />
      )}
    </div>
  );
}

4. 视频查看：react-player #

支持几乎所有主流视频源（本地文件、YouTube、Vimeo等），可自定义播放控件，功能全面。
示例代码：

import ReactPlayer from 'react-player';

function VideoViewer() {
  return (
    <ReactPlayer
      url="https://example.com/sample.mp4"
      width="600px"
      height="340px"
      controls
    />
  );
}

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