运行功能后在新选项卡中打开链接（.pdf 文件）且不更改路线答案

【问题标题】：Open link (.pdf file) in new tab after running function and without changing route运行功能后在新选项卡中打开链接（.pdf 文件）且不更改路线
【发布时间】：2020-03-14 19:38:41
【问题描述】：

在我的 react 应用程序中，我需要在 新选项卡 中显示一个 pdf 文件，在运行返回文件路径的函数之后。

到目前为止，我所做的是使用一个带有 onClick 事件的简单 div，它触发了上述函数，当我从后端获取文件的路径时，我使用的是 this.props.history.push(/' PDF') 并推送到 PDF 组件，顺便说一下：

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

我还使用了 react-new-window ，它工作正常，它确实在新窗口中打开了 pdf 组件但是因为我仍然使用 this.props.history.push，所以仍然是 react app更改不理想的路由。

然后，我使用了 Link 组件（来自 react-router-dom）。这里的问题是链接在函数运行之前被触发，以一个空的新选项卡结束。这就是我使用链接组件的方式：

<Link to=/PDF target="_blank">
<img className="print-dropdown" src={print} alt="print" />
<span onClick={() =>
   printCons(
     this.props.username,
     this.props.password,
     "A4",
     this.props.consignmentNo,
     this.props.updatePDFFilename,
    )
   }
>
  A4
 </span>
</Link>

任何建议将不胜感激。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

为什么不直接使用Window.open()？获得文件的 URL 后，您可以在新窗口中打开它，而无需推送任何状态或以其他方式执行任何特定于 React 的操作。

【讨论】：

如果它不将我重定向到 /login 页面，那将是一个很好的解决方案......