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

Posted 2023-02-21

【中文标题】React - 如何将 PDF 文件打开为 href 目标空白

【英文标题】：React - How to open PDF file as a href target blank

【发布时间】：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 文件？

【参考方案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;