React应用如何执行函数后在新标签页打开PDF且不修改路由？

这里有几个实用的方案，能完美解决你遇到的问题——在执行获取PDF路径的函数后，在新标签页打开PDF，同时不改动原React应用的路由：

方案1：直接用window.open()打开PDF原始URL（最简洁） #

既然你已经能从后端拿到PDF文件名，最直接的方式就是在获取到文件名后，直接构造PDF的完整URL，用window.open()在新标签页打开，完全不需要依赖React路由或额外组件。

步骤： #

1. 修改你的printCons函数，在成功获取文件名后直接打开新窗口：

// 假设你的printCons是异步函数，用于请求后端获取PDF文件名
const printCons = async (username, password, format, consignmentNo, updatePDFFilename) => {
  // 这里是你原有的请求逻辑，替换成实际的API调用
  const PDFFilename = await fetchPDFPathFromBackend(username, password, format, consignmentNo);
  
  // 如果需要更新父组件的状态（可选）
  updatePDFFilename(PDFFilename);
  
  // 构造PDF的完整URL并打开新标签页
  const pdfFullUrl = `${process.env.REACT_APP_NODE_SERVER}/${PDFFilename}`;
  window.open(pdfFullUrl, '_blank');
};

2. 把原来的Link组件换成普通的可点击元素（比如div），绑定onClick事件：

<div 
  onClick={() => printCons(
    this.props.username,
    this.props.password,
    "A4",
    this.props.consignmentNo,
    this.props.updatePDFFilename,
  )}
  style={{ cursor: 'pointer' }} // 添加上手型光标提示可点击
>
  <img className="print-dropdown" src={print} alt="print" />
  <span>A4</span>
</div>

优势： #

• 逻辑最简单，无需维护路由或额外组件
• 完全不会影响原应用的路由状态

方案2：用react-new-window渲染PDF组件（保留组件封装） #

如果你希望继续使用现有的PDF组件来展示内容，可以借助react-new-window，但不要调用history.push，而是直接在新窗口中渲染组件并传递文件名props。

步骤： #

1. 在你的父组件中添加状态，控制新窗口的显示和存储PDF文件名：

import NewWindow from 'react-new-window';

class YourParentComponent extends React.Component {
  state = {
    isPDFWindowOpen: false,
    currentPDFFilename: ''
  };

  printCons = async (username, password, format, consignmentNo) => {
    // 请求后端获取文件名
    const PDFFilename = await fetchPDFPathFromBackend(username, password, format, consignmentNo);
    
    // 更新状态，触发新窗口渲染
    this.setState({
      currentPDFFilename: PDFFilename,
      isPDFWindowOpen: true
    });
  };

  render() {
    const { isPDFWindowOpen, currentPDFFilename } = this.state;
    return (
      <>
        {/* 触发按钮 */}
        <div 
          onClick={() => this.printCons(
            this.props.username,
            this.props.password,
            "A4",
            this.props.consignmentNo
          )}
          style={{ cursor: 'pointer' }}
        >
          <img className="print-dropdown" src={print} alt="print" />
          <span>A4</span>
        </div>

        {/* 条件渲染新窗口 */}
        {isPDFWindowOpen && (
          <NewWindow>
            {/* 直接渲染你的PDF组件，传递文件名 */}
            <Iframe 
              url={`${process.env.REACT_APP_NODE_SERVER}/${currentPDFFilename}`} 
              position="absolute" 
              width="100%" 
              height="100%" 
            />
          </NewWindow>
        )}
      </>
    );
  }
}

优势： #

• 保留了你原有的PDF组件封装逻辑
• 新窗口的内容完全由你控制，可自定义样式或添加额外功能

方案3：通过路由打开新标签页（带查询参数） #

如果你一定要基于React路由体系来实现，可以在获取文件名后，用window.open()打开路由地址，并将文件名作为查询参数传递，这样原应用的路由不会被修改。

步骤： #

1. 修改printCons函数，打开带查询参数的路由：

const printCons = async (username, password, format, consignmentNo) => {
  const PDFFilename = await fetchPDFPathFromBackend(username, password, format, consignmentNo);
  
  // 构造带查询参数的路由URL，注意编码文件名避免特殊字符问题
  const pdfRouteUrl = `${window.location.origin}/PDF?filename=${encodeURIComponent(PDFFilename)}`;
  window.open(pdfRouteUrl, '_blank');
};

2. 更新你的PDF组件，从查询参数中获取文件名：

// 类组件版本
class PDFComponent extends React.Component {
  render() {
    // 解析URL查询参数
    const params = new URLSearchParams(this.props.location.search);
    const PDFFilename = params.get('filename');

    return (
      <Iframe 
        url={`${process.env.REACT_APP_NODE_SERVER}/${PDFFilename}`} 
        position="absolute" 
        width="100%" 
        height="100%" 
      />
    );
  }
}

// 函数组件版本（使用react-router-dom的useLocation）
import { useLocation } from 'react-router-dom';

const PDFComponent = () => {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const PDFFilename = params.get('filename');

  return (
    <Iframe 
      url={`${process.env.REACT_APP_NODE_SERVER}/${PDFFilename}`} 
      position="absolute" 
      width="100%" 
      height="100%" 
    />
  );
};

优势： #

• 符合你的路由使用习惯，适合需要路由权限控制的场景

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