当前位置：首页 > React

React实现文档预览

2026-01-26 20:32:37React

实现文档预览的方法

在React中实现文档预览可以通过多种方式完成，具体取决于文档类型和需求。以下是几种常见的方法：

使用第三方库预览PDF

安装react-pdf库，该库专门用于在React中渲染PDF文件。通过Document和Page组件可以轻松加载和显示PDF内容。

import { Document, Page } from 'react-pdf';

function PDFPreview({ file }) {
  return (
    <Document file={file}>
      <Page pageNumber={1} />
    </Document>
  );
}

使用iframe嵌入Office文档

对于Word、Excel等Office文档，可以通过微软的Office Online服务嵌入iframe实现预览。将文档链接转换为Office Online的预览URL即可。

<iframe 
  src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`}
  width="100%"
  height="500px"
/>

使用Google Docs Viewer

Google Docs Viewer支持多种文档格式的预览，包括PDF、Word、PPT等。通过iframe嵌入Google的预览服务即可。

<iframe
  src={`https://docs.google.com/viewer?url=${encodeURIComponent(fileUrl)}&embedded=true`}
  width="100%"
  height="500px"
/>

自定义图片预览

对于图片文件，可以直接使用HTML的<img>标签实现预览。通过URL.createObjectURL处理上传的文件对象。

function ImagePreview({ file }) {
  const [previewUrl, setPreviewUrl] = useState('');

  useEffect(() => {
    const objectUrl = URL.createObjectURL(file);
    setPreviewUrl(objectUrl);
    return () => URL.revokeObjectURL(objectUrl);
  }, [file]);

  return <img src={previewUrl} alt="Preview" />;
}

处理多种文档类型

可以通过文件扩展名判断文档类型，然后选择对应的预览方式。创建一个通用的文档预览组件来处理不同类型的文件。

function DocumentPreview({ file }) {
  const fileType = file.name.split('.').pop().toLowerCase();

  switch (fileType) {
    case 'pdf':
      return <PDFPreview file={file} />;
    case 'jpg':
    case 'png':
      return <ImagePreview file={file} />;
    default:
      return <OfficePreview file={file} />;
  }
}

实现上传和预览

结合文件上传功能，可以在用户选择文件后立即显示预览。使用HTML的<input type="file">元素获取文件对象。

function UploadAndPreview() {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {file && <DocumentPreview file={file} />}
    </div>
  );
}