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

IT技术 javascript reactjs react-router react-bootstrap
2021-03-25 09:53:17

这个在静态视图上相当简单的平凡任务不符合 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>;

编辑： 此处的解决方案： 由 Link_Cable 回答

6个回答

将 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;
补充说明。
2021-05-23 09:53:17
不用下载就可以打开吗？
2021-05-29 09:53:17
它可以工作，但在我构建了 react-scripts 之后它就无法工作了。我如何构建它以便它可以在生产构建中包含 pdf 。
2021-06-02 09:53:17
它也应该在生产中工作。你得到什么样的错误？你的/src文件夹里有pdf吗？
2021-06-06 09:53:17
是的，pdf将在 Chrome/Explorer/Firefox/Safari 上的新选项卡上打开。
2021-06-10 09:53:17

我必须创建一个函数来在新选项卡中打开 pdf 实际上：D

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

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

您也可以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;

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

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

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

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

为我工作！

我已经通过_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>

....

通过在serviceWorker使用时向文件名添加哈希来防止。

其它你可能感兴趣的问题
上一篇使用 react-hooks 在每次渲染上创建处理程序的性能损失 下一篇使用 babel 从 node_modules 导入module但失败