javascript - react JS : How do I create a downloadable link with PDF documents to download?

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 特定的问题。但是如果你想让它更像 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>
        )
    }
}

使用 anchor 并设置下载属性将强制它下载。 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>
        )
    }
}