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

问题描述

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

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

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

 <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 的外部链接工作正常.

pdf(保存在与上面代码相​​同的目录中)没有.

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

 <开关><Route path="/" 精确组件={Home}/><Route path="/contact" 精确组件={Contact}/><Route path="/about" 精确组件={About}/><路由组件={NotFound}/></开关>;

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

解决方案

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

import React, { Component } from 'react';从'../Documents/Document.pdf'导入PDF；类下载扩展组件{使成为() {返回 (<div className = "App"><a href = {Pdf} target = "_blank">下载 Pdf</a>

);}}导出默认下载；

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

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

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> 

The external link to google works fine.

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

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

EDIT: Solution here: answered by Link_Cable

解决方案

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屋！