HTML：如何使用链接下载pdf文件

Question

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

问题我遇到的是，每当我单击链接“项目注释”时，我都被重定向到错误页面。为什么我的链接没有下载pdf文件？

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS96T29jQnNuLnBuZyJ9” alt =“地图”>

在我正在使用的代码下面：

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;

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS9DekZCbHJuLnBuZyJ9” alt =“ field”>

也许我不正确地分配了路径？

到目前为止我所做的：

1）我能够实现到文档的链接，但是在我开始使用外部容器Contentful之后，pdf无法下载，这与我的期望相反。也许我在分配路径时出现错误？

2）在对这个问题进行了更多研究之后，我碰到了this个有用的帖子。似乎在这篇文章中问题可能出在下载？

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

Answer 1

您可以添加download属性，它相当well supported。