3

我正在使用 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）我一直在研究可能的解决方案并遇到了这个来源，但它对解决我遇到的问题没有用。

2）这篇文章也有，但没有提供示例，不知道如何继续。此外总是在同一个帖子中没有解释包含pdf文件的位置。它们应该包含在我的本地机器上还是包含在诸如Contentful 之类的外部前端工具中？

3）我查阅的其他帖子是这个帖子，它很有用，但网站在线时下载时似乎存在一些安全问题。

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

4

1 回答 1

5

This isn't a react specific issue. But if you want to make it more React-like, you could do:

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>
        )
    }
}

Using an anchor and setting the download attribute will force it to download. There may be some cross browser issues with the download attribute, so usually adding target="_blank" also will ensure it works everywhere.

If you insist on using a button element, you can modify it to make a form and force it to get the file on submit:

class DownloadLink extends React.Component {
    render() {
        return (
            <form method="get" action={this.props.src}>
                <button type="submit">{this.props.children}</button>
            </form>
        )
    }
}
于 2020-02-04T15:00:30.160 回答