React - 如何将PDF文件作为href的target blank打开

Question

React - 如何将PDF文件作为href的target blank打开

javascriptreactjsreact-routerreact-bootstrap

36

在静态视图上，这个平凡的任务非常简单，但在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捕获所有”路由。

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

编辑： 解决方案在这里：由 Link_Cable 回答

- Jonca33

您没有关于samba.pdf的路由，所以它会落在 catch-all 中。您需要设置服务器首先提供该文件或添加处理它的路由。 - alephtwo

这是一个仅限客户端的应用程序。因此，为“/file.pdf”设置专用路由是否就可以解决问题了？那么，我应该引用哪个组件呢？因为我只想要加载一个外部的pdf文件。 - Jonca33

6个回答

4

我必须创建一个函数来在新标签页中打开PDF文件：D

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

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

- Hung Vinh Ngo

4

您也可以直接使用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;

- Erik P_yan

2

我将以下内容放入了需要的组件头部。该文档存储在src文件夹下的Documents文件夹中。

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

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

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

对我很有帮助！

- Shayan

1

我已经解决了这个问题，方法是在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时，通过将哈希添加到文件名来防止此类情况发生。

- JackTheKnife

0

只有客户端？那么没有Web服务器来托管您的网站吗？如果您有一个Web服务器，那么您可以将原始PDF内容作为“application/pdf”内容类型返回到浏览器。仅限客户端是指指定相对路径，例如

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

- user2336704

在上面添加a标签并没有改变行为。它在普通的index.html上运行良好，但在React Bootstrap生态系统内部不起作用。此外，href需要存在于<MenuItem/>组件内部。 - Jonca33

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erik Martín Jordán · Accepted Answer

将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;