如何在 React 中引用 pdf 文件

Posted 2023-02-22

【中文标题】如何在 React 中引用 pdf 文件

【英文标题】：How to reference a pdf file in React

【发布时间】：2018-08-06 12:46:03

【问题描述】：

我有一个 Reactjs SPA，其文件结构如下所示：

在该应用程序中有一个简单的组件 (Resume.js)，我希望用户能够在浏览器中查看/下载 pdf 文件 (resume_english.pdf >）。但是，我无法在本地或计划托管 SPA 的 GitHub 页面中执行此操作。它总是将我重定向到主页。

Resume.js 看起来像这样：

import React, Component from 'react';

class Resume extends Component 
    constructor(props) 
        super(props);

        this.state = ;
    

    render() 
        return (
            <div className='resume-container'>
                <div id='resume-pdf'>You can view, download and print my résumé in pdf format in <a
                    href='./public/resume_english.pdf'>English</a> and <a href='#'>Spanish</a></div>
            </div>
        );
    


export default Resume;

关于如何解决问题的任何想法？我已经尝试过像this 这样导入，但没有成功。

【参考方案1】：

看起来这是用 create-react-app 制作的。如果是这样，public 目录中的文件将被复制到build，build 目录将作为您站点的根目录。所以合适的href是/resume_english.pdf。

尝试直接在浏览器中输入网址。类似http://localhost:3000/resume_english.pdf 或https://danielsto.github.io/resume_english.pdf

【讨论】：

它可以在本地工作，但不能在 GitHub Pages 上工作。拥有href=/resume_english.pdf 导致https://danielsto.github.io/resume_english.pdf，即Site not found。存储库是私有的，这可能是问题的一部分吗？

help.github.com/articles/…

取决于 github pages repo 的配置方式。如果是项目页面 (danielsto.github.io/reponame) 而不是用户页面 (danielsto.github.io)，您可以使用相对 url ./resume_english.pdf