如何在浏览器中打开本地PDF文件且保留下载选项？求推荐易用PDF Viewer包

问题原因 #

你用<a>标签直接链接PDF文件时，浏览器会根据服务器返回的Content-Disposition响应头（若为attachment）或自身默认规则触发下载。不想修改浏览器设置的话，可通过前端主动处理实现浏览器内预览。

解决方案一：无需第三方库，用iframe实现 #

通过在新窗口嵌入iframe加载PDF，强制浏览器用内置阅读器渲染：

import Pdf from "../../../assets/pdf/abc.pdf";

const openPdfInBrowser = () => {
  const newWindow = window.open("", "_blank");
  newWindow.document.write(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>PDF Preview</title>
        <style>
          body, html { margin: 0; padding: 0; height: 100%; }
          iframe { width: 100%; height: 100%; border: none; }
        </style>
      </head>
      <body>
        <iframe src="${Pdf}"></iframe>
      </body>
    </html>
  `);
  newWindow.document.close();
};

// 替换原a标签为按钮
<button className="btn" onClick={openPdfInBrowser}>Learn More</button>

解决方案二：使用第三方PDF Viewer库 #

推荐两款易用的React生态PDF查看组件：

1. react-pdf（轻量基础） #

轻量级，适合只需基础预览功能的场景，支持自定义渲染：

首先安装依赖：

npm install react-pdf

使用示例：

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';
import Pdf from "../../../assets/pdf/abc.pdf";

const BasicPdfViewer = () => {
  const [numPages, setNumPages] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);

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

  return (
    <div className="pdf-viewer-container">
      <Document file={Pdf} onLoadSuccess={handleDocumentLoad}>
        <Page pageNumber={currentPage} />
      </Document>
      <div className="page-controls">
        <button 
          disabled={currentPage === 1} 
          onClick={() => setCurrentPage(prev => prev - 1)}
        >
          上一页
        </button>
        <span>第 {currentPage} 页 / 共 {numPages} 页</span>
        <button 
          disabled={currentPage === numPages} 
          onClick={() => setCurrentPage(prev => prev + 1)}
        >
          下一页
        </button>
      </div>
    </div>
  );
};

你可以将这个组件放在弹窗或单独页面中，点击按钮跳转至该页面实现预览。

2. @react-pdf-viewer/core（功能完整） #

自带工具栏（放大、缩小、翻页、下载等），适合需要完整阅读器体验的场景：

安装依赖：

npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout

使用示例：

import { Viewer } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import Pdf from "../../../assets/pdf/abc.pdf";

const FullFeaturePdfViewer = () => {
  const defaultLayout = defaultLayoutPlugin();

  return (
    <div style={{ height: '80vh', width: '100%' }}>
      <Viewer fileUrl={Pdf} plugins={[defaultLayout]} />
    </div>
  );
};

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