React+Next项目中实现PDF预览功能

一朵好运莲

已于 2025-03-20 10:55:14 修改

阅读量430

点赞数 1

文章标签： react.js pdf javascript

于 2025-03-20 10:50:49 首次发布

本文链接：https://blog.youkuaiyun.com/xiaolouuuu/article/details/146390313

版权

一、在page文件夹下创建 PDF组件

import { useRouter } from 'next/router';
import styles from '../styles/Pdf.module.css'; // 使用 CSS Modules

const PdfPreviewPage = () => {
  const router = useRouter();
  const { file } = router.query;

  // 确保 file 是字符串类型
  const pdfUrl = typeof file === 'string' ? file : '';

  return (
    <div>{pdfUrl ? <iframe src={pdfUrl} className={styles.pdfPreview} /> : <p>PDF 文件路径无效或未提供。</p>}</div>
  );
};

export default PdfPreviewPage;

useRouter() 获取当前的路由对象 router，通过 router.query 可以访问 URL 中的查询参数。
从 router.query 中解构出 file 参数，它代表了 PDF 文件的路径。
对 file 进行类型检查，确保它是字符串类型，将其赋值给 pdfUrl。
在返回的 JSX 中，通过条件渲染判断 pdfUrl 是否有值。如果有值，则使用 <iframe> 标签，将 pdfUrl 作为 src 属性值，这样浏览器会尝试在该 iframe 中加载并预览 PDF 文件；如果没有值，则显示提示文本 “PDF 文件路径无效或未提供。” 。

二、点击传递PDF的路径并跳转

 <div className={styles.downloadCatalogBtn} onClick={handleDownloadCatalog}>
              <span>下载目录</span>
              <img src="/images/2.svg" alt="" />
 </div>

  const handleDownloadCatalog = () => {
    // 假设你的 PDF 文件名为 'produc.pdf'，存放在 public 文件夹中
    const pdfPath = product.pdf;
    // 跳转到 PDF 预览页面
    router.push(`/pdf-preview?file=${encodeURIComponent(pdfPath)}`);
  };

成果展示：