[英]HTML: How to download a pdf file using a link
I am trying to download a .pdf
document from the external database Contentful using an HTML
link on a user interface as shown below.我正在尝试使用用户界面上的
HTML
链接从外部数据库Contentful下载.pdf
文档,如下所示。
The problem I have is that everytime I click the link "PROJECT NOTES" I am redirected to an error page.我遇到的问题是,每次单击“项目说明”链接时,都会被重定向到错误页面。 Why my link does not download the
pdf
file?为什么我的链接没有下载
pdf
文件?
Below the code I am using:在我使用的代码下方:
import Client from '../Contentful';
class Sidebar extends React.Component {
state = {
ships: []
};
async componentDidMount() {
let response = await Client.getEntries({
content_type: 'cards'
});
const ships = response.items.map((item) => {
const {
name,
slug,
projectnotes
} = item.fields;
return {
name,
slug,
projectnotes
};
});
this.setState({
ships
});
}
getFilteredShips = () => {
// operations .......
};
render() {
return (
<div className="map-sidebar">
{this.props.activeShipTypes}
<pre>
{this.getFilteredShips().map((ship) => {
console.log(ship);
return (
<Card className="mb-2">
<CardImg />
<CardBody>
<CardTitle>
<h3 className="thick">{ship.name}</h3>
</CardTitle>
<Row style={{ marginTop: '20px' }}>
<div className="buttoncontainer">
<div className="btn btn-cards">
<a className="buttonLink" href={ship.projectnotes}>
Project Notes
</a>
</div>
<div className="btn btn-cards">
<a className="buttonLink" href={ship.distancesandcontours}>
Dist and Contours
</a>
</div>
</div>
</Row>
</CardBody>
</Card>
);
})}
</pre>
</div>
);
}
}
export default Sidebar;
I can confirm that I am reading correctly the name of the field:我可以确认我正确读取了该字段的名称:
Maybe am I incorrectly assigning the path?也许我错误地分配了路径?
EDIT 2编辑 2
I tried the following too but no download happened:我也尝试了以下方法,但没有发生下载:
<a className="buttonLink" download={ship.projectnotes} href={ship.projectnotes}>Project Notes</a>
What I have done so far:到目前为止我做了什么:
1) I was able to implement the link to the document but after I started using the external container Contentful
, the pdf
is not downloadable, contrarily to what I was hoping. 1)我能够实现文档的链接,但是在我开始使用外部容器
Contentful
, pdf
无法下载,这与我希望的相反。 Maybe there is an error in how I am assigning the path?也许我分配路径的方式有误?
2) After researching more this problem I came across this post which was useful. 2)在对这个问题进行了更多研究之后,我发现了这篇很有用的帖子。 It seems that in this post the problem could be the download?
似乎在这篇文章中,问题可能出在下载上?
I am a little bit confused.我有点困惑。 Thanks for pointing in the right direction.
感谢您指出正确的方向。
您可以尝试将download
属性添加到a
,它得到了很好的支持。
Dear, You an try to use this亲爱的,你试试用这个
<a className="buttonLink" href={yourDownloadFileLink} dowload>
Click to download
</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.