Question

我正在使用GitHub Pages来托管我的网站。我有一个PDF文件，我希望访问者能够直接在浏览器中打开。但是当我将PDF文件上传到GitHub页面并链接到它时，它会在GitHub的查看器中打开。有没有办法在浏览器中打开PDF？我不想将文档上传到Dropbox或Google云端硬盘，因为这些服务在某些国家/地区不可用。

使用原始网址会导致下载。但我想在浏览器中打开该文件。

Answer 1

不要直接从GitHub加载PDF，而是将其作为静态文件包含在GitHub Pages分支中。这可以通过putting the file somewhere in your source tree：

来完成

上述所有其他目录和文件（例如css和images文件夹，favicon.ico文件等）将逐字复制到生成的网站。如果你很想知道它们是如何布局的，那么有很多sites already using Jekyll。

所以将PDF放在有意义的地方，例如pdfs/foo.pdf。

要在本地和GitHub页面Jekyll recommends the following上创建指向此PDF的链接（特别注意第2点）：

有时在将gh-pages分支推送到GitHub之前预览您的Jekyll网站会很不错。但是，GitHub用于项目页面的子目录式URL结构使URL的正确解析变得复杂。这是一种利用GitHub项目页面URL结构（username.github.io/project-name/）的方法，同时保持在本地预览Jekyll站点的能力。



在_config.yml中，将baseurl选项设置为/project-name - 请注意前导斜杠和尾部斜杠的缺席。



在引用JS或CSS文件时，请执行以下操作：{{ site.baseurl }}/path/to/css.css - 请注意紧跟在变量之后的斜杠（就在“路径”之前）。



执行永久链接或内部链接时，请执行以下操作：{{ site.baseurl }}{{ post.url }} - 请注意两个变量之间存在无斜杠。



最后，如果您想在使用jekyll serve提交/部署之前预览您的网站，请确保将空字符串传递给--baseurl选项，以便您可以正常查看localhost:4000的所有内容（开头时没有/project-name）：jekyll serve --baseurl ''

现在您可以使用{{ site.baseurl }}/pdfs/foo.pdf链接到您的PDF。

Answer 2

我已经阅读了本节中的大多数答案，但是大多数答案很难弄清楚或者太含糊，无法理解正在发生的事情。有一种更简单的方法可以执行此操作，因此为了在Github的浏览器中显示Pdf文件，请执行以下步骤：

步骤1：例如，使用您的Github用户名创建静态网站/存储库，如果用户名是winterishere，则存储库将是winterishere.github.io

步骤2：将所需的pdf放入该存储库中，并在与pdf文件相同的位置添加一个index.html文件，例如：resume.pdf。

步骤3：打开index.html并在下面将embed标签添加到其中：

<embed src="https://yourusername.github.io/filename.pdf" width="100%" height="850px"/>

在我的示例中，文件代码为：

 <embed src="https://winterishere.github.io/resume.pdf" width="100%" height="850px"/>

Answer 3

从Github静态页面在浏览器中显示Pdf非常容易，因为您需要进行以下过程，

使用您的Github用户名创建静态网站/存储库，例如，如果用户名为 sumanbogati ，则存储库将为 sumanbogati.github.io
将所需的pdf放入该存储库
现在可以在任意位置找到Pdf的网址

例如，在Html网页中显示pdf

<embed src="https://sumanbogati.github.io/sample.pdf" type="application/pdf" />

这是instant demo。可以找到更多详细信息Here。

Answer 4

假设您的个人网站托管在Github页面中，如下所示：

https://username.github.io

存储库的名称应为 username.github.io 。如果您有一个名为 document.pdf 的pdf文件，并将其放置在文件夹目录中，那么您应该能够通过以下链接直接在浏览器中打开它： / p>

https://username.github.io/folder/document.pdf

要允许用户在浏览器的新窗口中打开pdf，可以使用以下HTML，其中“ PDF”指向链接：

<a href="username.github.io/folder/document.pdf" target="_blank">PDF.</a>

Answer 5

你可以这样链接

<a target='_blank' href={require('path/to/pdf/file')}>PDF Doc</a>

然后，当您按下GitHub页面时，您将看到您的pdf文件路径

https://userName.github.io/repoName/static/media/pdfFileName.hashNumber.pdf

我相信如果您导入文件而不是使用require也可以，但我还没有测试过。

Answer 6

将PDF文件放在类似的文件夹中； www.website/pdf/example.pdf，这将停止在根目录之外下载文件。

步骤是：

1。。在主目录中创建一个新文件。

2。。命名文件/ pdf /并保存。

3。。将example.pdf文件上传到此文件夹

结果：: 可以在以下位置查看PDF： www.website/pdf/example.pdf

4。。避免使用.pdf URL的可选步骤。在此文件夹中创建一个index.html文件，并使用PDF嵌入标签创建一个空白html文件：

Answer 7

在index.html内使用此
<embed src="/Repo_Name/Resume_Name.pdf" width="100%" height="745px" />

这对我有用，check
**仅适用于笔记本电脑视图

Answer 8

在存储库中创建一个名为index.html的文件，其中仅包含以下代码：

<iframe src="./yourfile.pdf" width="100% height=100%">
</iframe>

您的pdf文件必须与“ index.html”文件位于同一目录中。这意味着您的pdf文件和index.html文件都需要上传到git hub存储库。然后，您可以使用指向“ index.html”文件的github页面在浏览器中显示pdf。

使用<iframe>标签现在更好，因为在某些浏览器/设备中不再支持<embed>标签。

Answer 9

请随意尝试以下方法，因为它在我的 github 页面上对我有用。

我们需要两个文件：
a)简历.html
b)简历.pdf

将这两个文件放在主工作目录中。这些文件需要与您的“index.html”文件位于同一目录中。

将以下内容添加到您正在处理的 html 文件中（假设它的 index.html）：

   <li><a href="./Resume.html" target="_blank">
   <p>resume</p>
   </a></li>

然后，将以下内容添加到您刚刚创建的 resume.html 中：

 <embed src="./Resume.pdf" type="application/pdf" width=100% height=850px />

它会做什么：加载主 html（即 index.html）并单击其中的简历文本后，应打开一个新窗口并加载 resume.html，此 resume.html 将加载 Resume.pdf。

使用Github Pages在浏览器中打开PDF

9 个答案: