【问题标题】：HTML: How to download a pdf file using a linkHTML：如何使用链接下载 pdf 文件
【发布时间】：2020-06-15 02:31:36
【问题描述】：

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

问题我遇到的是每次点击“项目注释”链接时，我都会被重定向到错误页面。为什么我的链接没有下载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) 我能够实现文档的链接，但是在我开始使用外部容器Contentful 后，pdf 无法下载，这与我希望的相反。也许我分配路径的方式有误？

2) 在研究了更多这个问题后，我发现了this 帖子，这很有用。看来这个帖子的问题可能是下载？

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

【问题讨论】：

标签： javascript html reactjs contentful

【解决方案1】：

您可以尝试将download 属性添加到a，它非常@987654321@。

【讨论】：

感谢您阅读这个问题。我用您的建议更新了上面 EDIT 2 的问题，但什么也没发生。我还是做错了吗？
This 是我得到的。这有帮助吗？
download 是一个布尔属性，它不需要值（此处），但这不应该导致该问题。 ship.projectnotes 绝对是正确的值吗？也许数据有问题？
是的，我试过带属性和不带属性。我认为是正确的值。我如何console.log() 来确保它确实如此？也许我设置的路径不正确。
是的，这听起来对我来说路径是错误的。您应该可以在浏览器中看到href 的值，您可以在那里检查它是否正确。

【解决方案2】：

你好

亲爱的，你试试用这个

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

【讨论】：