このありふれたタスクは静的ビューではかなり単純であり、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による回答
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;
必要なコンポーネントのヘッダーに次を配置しました。ドキュメントは、srcの下のDocumentsフォルダーに保存されていました。
import Pdf from '../Documents/doc.pdf';
そして、hrefを使用してタグ内のインポートされたドキュメントを使用しました。
<a href = {Pdf}>Resume</a>
私のために働いた!
実際に新しいタブでpdfを開く関数を作成する必要がありました:D
import Pdf from "../../documents/resume.pdf";
onResumeClick() {
window.open(Pdf);
}
render() {
return (
<a onClick={this.onResumeClick}>
Resume
</a>
)}
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
が使用されている場合、ファイル名にハッシュを追加することにより防止します。
クライアント側のみ? WebサイトをホストするWebサーバーはありませんか? Webサーバーがある場合は、生のpdfコンテンツコンテンツを「application/pdf」コンテンツタイプとしてブラウザに返すことができます。クライアント側のみのような相対パスを指定することです
<a href="../FolderName/samba.pdf">