HTML: 如何使用 link 下载 pdf 文件

Question

我正在尝试在用户界面上使用 HTML link 从外部数据库 Contentful 下载 .pdf 文档，如下所示。

我遇到的问题 是每次单击 link "PROJECT NOTES" 我都会被重定向到错误页面。为什么我的 link 没有下载 pdf 文件？

下面我使用的代码：

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;

我可以确认我正在正确读取字段名称：

也许我错误地分配了路径？

编辑 2

我也尝试了以下但没有下载：

<a className="buttonLink" download={ship.projectnotes} href={ship.projectnotes}>Project Notes</a>

到目前为止我做了什么：

1) 我能够将 link 实现到文档中，但是在我开始使用外部容器 Contentful 之后，pdf 无法下载，这与我的情况相反希望。也许我分配路径的方式有误？

2) 在研究了更多这个问题之后，我遇到了 this post 这很有用。看来这个post可能是下载的问题？

我有点困惑。感谢您指出正确的方向。

Answer 1

您可以尝试将 download 属性添加到 a，非常 well supported。

Answer 2

你好

亲爱的，你试试用这个

<a className="buttonLink" href={yourDownloadFileLink} dowload>
     Click to download
</a>

HTML: 如何使用 link 下载 pdf 文件

HTML: How to download a pdf file using a link

html

javascript

reactjs

contentful

你好