React JS：如何创建包含 PDF 文档的可下载链接以供下载？

Question

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

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

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

下方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) 我一直在研究可能的解决方案，遇到了this source，但它对解决我遇到的问题没有用。

2) This post too 但没有提供示例，我不确定如何继续。此外，总是在同一个帖子中没有说明在哪里包含pdf 文档。它们应该包含在我的本地计算机上还是包含在诸如Contentful 之类的外部前端工具中？

3) 其他我查阅的帖子是this post 很有用但是网站在线时下载的时候好像有一些安全问题。

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

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 属性可能存在一些跨浏览器问题，因此通常添加 target="_blank" 也将确保它在任何地方都有效。

如果你坚持使用按钮元素，你可以修改它以制作一个表单并强制它在提交时获取文件：

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