web-dev-qa-db-ja.com

React-開く方法PDF hrefターゲットとしてのファイルブランク

このありふれたタスクは静的ビューではかなり単純であり、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>

Googleへの外部リンクは正常に機能します。

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

EDIT：ここでの解決策： Link_Cableによる回答

javascriptreactjsreact-routerreact-bootstrap
8
Jonca33

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;
13
Erik Martín Jordán

必要なコンポーネントのヘッダーに次を配置しました。ドキュメントは、srcの下のDocumentsフォルダーに保存されていました。

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

そして、hrefを使用してタグ内のインポートされたドキュメントを使用しました。

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

私のために働いた！

1
Shayan

実際に新しいタブでpdfを開く関数を作成する必要がありました：D

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

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

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が使用されている場合、ファイル名にハッシュを追加することにより防止します。

0
JackTheKnife

クライアント側のみ？ WebサイトをホストするWebサーバーはありませんか？ Webサーバーがある場合は、生のpdfコンテンツコンテンツを「application/pdf」コンテンツタイプとしてブラウザに返すことができます。クライアント側のみのような相対パスを指定することです

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