React-如何将PDF文件打开为href目标空白 [英] React - How to open PDF file as a href target blank

问题描述

这个普通的任务在静态视图上非常简单，不符合React.

This mundane task fairly simple on static views, isn't complying with React.

有人可以建议我如何在新标签页上以href格式打开pdf文件吗?

Can someone advise me how to open a pdf file as a href on a new tab?

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

Here's my code using react-bootstrap and 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> 

与Google的外部链接正常工作.

The external link to google works fine.

PDF(与上面的代码保存在同一级别的目录中)没有.

The pdf (saved on same level directory as the code above) doesnt.

当我单击pdf链接时，它会将我重定向到"404全部捕获"路线.

When I click on the pdf link it redirects me to my "404 catch all" route.

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

解决方案在这里:由Link_Cable回答

推荐答案

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

Place the pdf into a folder in /src. Import it like a component. Set href parameter as the imported pdf and the 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;

这篇关于React-如何将PDF文件打开为href目标空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！