React JS:如何创建一个包含PDF文档的可下载链接来下载?

Question

我正在使用HTML，CSS和JS构建一个小型网站示例项目。 我有一个按钮，单击后应下载PDF示例数据(目前不需要将文档保存在哪里(。

问题：如何使用HTML按钮下载PDF文档？

我正在为我想下载数据的每个组件使用 reactstrap 卡。这只是一个例子，真正的网站将为每张卡包含一个带有特定可下载信息的按钮。

以下SideBar.js

：

import React from 'react';
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle } from 'reactstrap';
import '../components/SideBar.css';
import { Link } from 'react-router-dom';
class DownloadLink {
render() {
return (
<form method="get" action={this.props.src}>
<button type="submit">{this.props.children}</button>
</form>
);
}
}
class MyButton {
render() {
return <DownloadLink src="/home/emanuele/Desktop/Projects/example1.pdf">Download Project Specs</DownloadLink>;
}
}
const Sidebar = () => (
<div className="map-sidebar">
<Card className="mb-2">
<CardImg />
<CardBody>
<div className="row">
<img className="image-sizing-primary" src={image_1} alt="Atchafalaya" />
</div>
<CardTitle>
<h3>Atchafalaya</h3>
</CardTitle>
<CardSubtitle>Trailing Suction Hopper Dredge</CardSubtitle>
<CardText>
<br />
<h6>Project Details</h6>
</CardText>
<div className="row">
<div class="btn-toolbar">
<MyButton />
<Link to="/vessels/Atchafalaya" className="btn-primary">
Go to vessel
</Link>
</div>
</div>
</CardBody>
</Card>
</div>
);
export default Sidebar;

到目前为止我做了什么：

1(我一直在研究一种可能的解决方案，并遇到了这个来源，但它对解决我遇到的问题没有用。

2(这篇文章也是，但没有提供任何示例，我不确定如何进行。此外，总是在同一帖子中不解释包含pdf文档的位置。它们应该包含在我的本地计算机上还是外部前端工具(如 Contentful(上？

3(我咨询的其他帖子是这篇文章，它很有用，但是当网站在线时，下载过程中似乎存在一些安全问题。

我对程序应该是什么以及如何继续前进有点困惑。 感谢您为我指出解决此问题的正确方向。

Answer 1

这不是一个特定的反应问题。但是如果你想让它更像 React，你可以这样做：

import React from "react";
class DownloadLink extends React.Component {
render() {
return (
<a href={this.props.src} download>{this.props.children}</a>
)
}
}

class MyComponent extends React.Component {
render() {
return (
<DownloadLink src="/path/to/my.pdf">Click Here</DownloadLink>
)
}
}

使用定位点并设置 download 属性将强制下载。download属性可能存在一些跨浏览器问题，因此通常添加target="_blank"也可以确保它在任何地方都能正常工作。

如果您坚持使用按钮元素，则可以修改它以创建表单并强制它在提交时获取文件：

class DownloadLink extends React.Component {
render() {
return (
<form method="get" action={this.props.src}>
<button type="submit">{this.props.children}</button>
</form>
)
}
}