
本文介绍了React - 如何打开 PDF 文件作为 href 目标空白的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这个在静态视图上相当简单的平凡任务不符合 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 目标空白的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!