React - 如何将 PDF 文件打开为 href 目标空白答案

【问题标题】：React - How to open PDF file as a href target blankReact - 如何将 PDF 文件打开为 href 目标空白
【发布时间】：2018-07-12 09:02:57
【问题描述】：

这个在静态视图上相当简单的平凡任务不符合 React。

有人能告诉我如何在新标签页上打开 pdf 文件作为 href 吗？

这是我使用 react-bootstrap 和 react-router 的代码：

    <NavDropdown eventKey={3} title="Forms">

        <MenuItem eventKey={3.1} href="https://www.google.com/" target="_blank">Form 1</MenuItem>

        <MenuItem eventKey={3.2} href="samba.pdf" target="_blank">Form 2</MenuItem>
    </NavDropdown>

到谷歌的外部链接工作正常。

pdf（与上面的代码保存在同一级目录中）没有。

当我点击 pdf 链接时，它会将我重定向到我的“404 catch all”路线。

    <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/contact" exact component={Contact} />
        <Route path="/about" exact component={About} />
        <Route component={NotFound} />
    </Switch>;

编辑： 这里的解决方案： answered by Link_Cable

【问题讨论】：

您没有前往samba.pdf 的路线，因此您无法将其全部捕获。您要么需要先设置服务器以提供该文件，要么添加处理它的路由。
这是一个仅限客户端的应用程序。那么“/file.pdf”的专用路由应该可以解决问题吗？那么，我会引用什么组件，因为我只想“从外部”加载一个 pdf 文件？

标签： javascript reactjs react-router react-bootstrap

【解决方案1】：

只有客户端？所以没有网络服务器来托管您的网站？如果您有一个网络服务器，那么您可以将原始 pdf 内容内容作为“应用程序/pdf”内容类型返回给浏览器。客户端只需要指定一个相对路径，如

<a href="../FolderName/samba.pdf">

【讨论】：

添加上面的 a 标签并没有改变行为。它在简单的 index.html 上运行良好，但在 React Bootstrap 生态系统中却不行。加上 href 需要存在于组件中。

【解决方案2】：

将 pdf 文件放入 /src 的文件夹中。像组件一样导入它。将href参数设置为导入的pdf和target = "_blank"。

import React, { Component } from 'react';
import Pdf from '../Documents/Document.pdf';

class Download extends Component {

  render() {

    return (
        <div className = "App">
          <a href = {Pdf} target = "_blank">Download Pdf</a>
        </div>
    );

  }
}

export default Download;

【讨论】：

已添加说明。
不下载就打开了吗？
是的，pdf 将在 Chrome/Explorer/Firefox/Safari 的新标签页上打开。
它可以工作，但在我构建了 react-scripts 之后它就不能工作了。我如何构建它以便它可以在生产构建中包含 pdf。
它也应该在生产中工作。你得到什么样的错误？ /src 文件夹中有 pdf 文件吗？

【解决方案3】：

我将以下内容放在我需要它的组件的标题中。该文档存储在 src 下的 Documents 文件夹中。

import Pdf from '../Documents/doc.pdf';

然后在使用href的标签中使用导入的文档。

<a href = {Pdf}>Resume</a>

为我工作！

【讨论】：

【解决方案4】：

实际上我必须创建一个函数才能在新标签页中打开 pdf :D

import Pdf from "../../documents/resume.pdf";
onResumeClick() {
  window.open(Pdf);
}

render() { 
return (
   <a onClick={this.onResumeClick}>
      Resume
   </a>
)}

【讨论】：

【解决方案5】：

我通过在public 文件夹中创建_someFolder 然后在组件中解决了这个问题：

import {pdfFile} from "/_someFolder/pdfFile.pdf";

....

<div className="headerProfile-menu-list" onClick={() => window.open(pdfFile)}><i className="mdi mdi-help-circle"></i> Help</div>

....

在使用 serviceWorker 时通过向文件名添加哈希来防止。

【讨论】：

【解决方案6】：

你也可以直接使用require函数：

import React, { Component } from 'react';
    
    class Download extends Component {
    
      render() {
    
        return (
          <div className="App">
            <a href={require('../Documents/Document.pdf')} target="_blank">Download Pdf</a>
          </div>
        );
      }
    }
    
    export default Download;

【讨论】：