Question

这个平凡的任务在静态视图上相当简单，并不符合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链接时，它会将我重定向到我的＆＃34; 404 catch all＆＃34;路由。

    <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

Answer 1

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

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;

Answer 2

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

Answer 3

仅限客户端？那么没有Web服务器来托管您的网站？如果您有一个网络服务器，那么您可以将原始的pdf内容内容返回给浏览器，作为＆＃34; application / pdf＆＃34;内容类型。客户端只能指定一个相对路径，如

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

Answer 4

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

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

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

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

为我工作！

Answer 5

实际上我必须提供一个在新标签页中打开pdf的功能：D

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

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

Answer 6

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

public

使用import {pdfFile} from "/_someFolder/pdfFile.pdf"; .... <div className="headerProfile-menu-list" onClick={() => window.open(pdfFile)}><i className="mdi mdi-help-circle"></i> Help</div> ....时通过在文件名中添加哈希值来防止。

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

6 个答案: