Javascript React - 如何打开 PDF 文件作为 href 目标空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48572896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React - How to open PDF file as a href target blank
提问by Jonca33
This mundane task fairly simple on static views, isn't complying with React.
这个在静态视图上相当简单的平凡任务不符合 React。
Can someone advise me how to open a pdf file as a href on a new tab?
有人可以建议我如何在新标签上打开 pdf 文件作为 href 吗？
Here's my code using react-bootstrap and react-router:
这是我使用 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>
The external link to google works fine.
谷歌的外部链接工作正常。
The pdf (saved on same level directory as the code above) doesnt.
pdf（保存在与上面代码相同的目录中）没有。
When I click on the pdf link it redirects me to my "404 catch all" route.
当我点击 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:Solution here: answered by Link_Cable
编辑：此处的解决方案： 由 Link_Cable 回答
回答by Erik Martín Jordán
Place the pdf into a folder in /src. Import it like a component. Set href parameter as the imported pdf and the target = "_blank".
将 pdf 放入 /src 中的文件夹中。像组件一样导入它。将 href 参数设置为导入的 pdf 并且目标 = "_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;
回答by Shayan
I placed the following in the header of the component I needed it in. The document was stored in Documents folder under src.
我将以下内容放在我需要它的组件的标题中。该文档存储在 src 下的 Documents 文件夹中。
import Pdf from '../Documents/doc.pdf';
And then used the imported document in the tag using href.
然后使用 href 在标签中使用导入的文档。
<a href = {Pdf}>Resume</a>
Worked for me!
为我工作！
回答by Hung Vinh Ngo
I had to make a function to open the pdf in the new tab actually :D
我必须创建一个函数来在新选项卡中打开 pdf 实际上：D
import Pdf from "../../documents/resume.pdf";
onResumeClick() {
window.open(Pdf);
}
render() {
return (
<a onClick={this.onResumeClick}>
Resume
</a>
)}
回答by HymanTheKnife
I have solved that by creating _someFolderin the publicfolder and then in the component:
我已经通过_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>
....
that prevent by adding hashes to the filename when serviceWorkeris used.
通过在serviceWorker使用时向文件名添加哈希来防止。
回答by HymanTheKnife
Client side only? So there is no web server to host your web site? If you have a webserver then you could return the raw pdf content content back to the browser as "application/pdf" content type. Client side only would be to specify a relative path like
只有客户端吗？所以没有网络服务器来托管您的网站？如果您有网络服务器，那么您可以将原始 pdf 内容内容作为“应用程序/pdf”内容类型返回到浏览器。客户端只会指定一个相对路径，如
<a href="../FolderName/samba.pdf">
