logo标签列表

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

webgithubgithub-pages
47
我正在使用GitHub Pages托管我的网站。我有一个PDF文件，希望访问者能够直接在浏览器中打开。但是，当我将PDF文件上传到GitHub Pages并链接到它时，它会在GitHub的查看器中打开。是否有办法在浏览器中打开PDF？我不想将文档上传到Dropbox或Google Drive，因为这些服务在某些国家不可用。
使用原始URL会导致下载。但是我希望文件在浏览器中打开。
1
你是如何链接到文件的？如果你直接从GitHub存储库加载它，你需要使用“raw”链接。 - Chris
抱歉，我的之前的链接有误导性。我已经在下面写了一个正确的答案，并且我会删除提到 site.static_files 的评论。 - Chris
不，你的答案基本上只是复制粘贴。 - Yan Song
我同意SO的建议。但是我认为你理解错了。提供上下文意味着解释，而不是复制粘贴。 - Yan Song
2
我投票关闭了这个问题，因为它不是一个编程问题，并且在 Stack Overflow 上是离题的。关于您网站的非编程问题应该在 [webmasters.se] 上提问。将来请在那里提出此类问题。 - Stephen Ostermiller
显示剩余2条评论
11个回答
45

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

https://username.github.io

仓库的名称应命名为用户名.github.io。如果您有名为document.pdf的pdf文件，并将其放置在目录folder中，则可以通过以下链接直接在浏览器中打开：

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

为了让用户能够在浏览器中打开 PDF 文档的新窗口，您可以使用以下 HTML 代码，其中“PDF”指向链接：

<a href="username.github.io/folder/document.pdf" target="_blank">PDF.</a>
2
这可能应该取代已接受的答案，截至2019年。它更简单，并且完美地发挥作用。 - Adam_G
3
这让我得到了 404 文件未找到的错误。我正在尝试访问此文件：https://github.com/ethanabrooks/ethanabrooks.github.io/blob/master/static/CV.pdf ，使用此链接：https://ethanabrooks.github.io/static/CV.pdf - ethanabrooks
我认为这个解决方案对于新文件已经不再适用了！但它仍然适用于旧文件。 - J.K
感谢解释...好的，我不想下载它，我想在新窗口中打开它。<a href="username.github.io/folder/document.pdf" target="_blank">PDF.</a>如何做到这一点？：<a href="https://publications.jrc.ec.europa.eu/repository/bitstream/JRC117910/jrc117910_dihs_survey_jrc_report_pubsy_online.pdf" target="_blank">PDF-Text.</a> - zero
这个不再起作用了。简单的解决方法是：在文件地址前添加 https://，例如 <a href="https://username.github.io/folder/document.pdf" target="_blank">PDF.</a>，这样链接就可以将用户直接导向你的文件。 - yuki
18

不要直接从GitHub加载PDF文件，而应将其作为静态文件包含在GitHub Pages分支中。这可以通过简单地将文件放在源代码树的某个位置来完成：

除了上面列出的那些目录和文件之外的所有其他目录和文件（例如css和images文件夹、favicon.ico文件等）都将完全复制到生成的站点中。如果您想看看它们的布局，已经有许多使用Jekyll的站点。

因此，将PDF文件放在一个合理的地方，例如pdfs/foo.pdf。

为使本地和GitHub Pages中的PDF链接都起作用，Jekyll推荐以下方法（特别注意第2点）：

有时候在将gh-pages分支推送到GitHub之前预览Jekyll网站是非常好的。然而，GitHub用于项目页面的子目录式URL结构会使URL的正确解析变得复杂。下面是一种利用GitHub项目页面URL结构（username.github.io/project-name/）并保持本地预览Jekyll网站的方法。

  1. 在_config.yml中，将baseurl选项设置为/project-name——注意前面的斜杠和后面没有斜杠。

  2. 引用JS或CSS文件时，请按照以下方式执行：{{ site.baseurl }}/path/to/css.css——请注意变量之后（“path”之前）立即跟随斜杠。

  3. 在创建永久链接或内部链接时，请按照以下方式操作：{{ site.baseurl }}{{ post.url }} - 注意这两个变量之间没有斜杠。

  4. 最后，如果你想在使用jekyll serve进行提交/部署之前预览你的站点，请务必向--baseurl选项传递一个空字符串，以便你可以在localhost:4000正常查看所有内容（开头不带/项目名称）：jekyll serve --baseurl ''

现在，你可以使用{{ site.baseurl }}/pdfs/foo.pdf来链接你的PDF文件了。

亲爱的Chris，你好，感谢你的一切，当然还有解释……我不想把它加载下来，我想在新窗口中打开它。<a href="username.github.io/folder/document.pdf" target="_blank">PDF.</a>怎么做呢？：<a href="https://publications.jrc.ec.europa.eu/repository/bitstream/JRC117910/jrc117910_dihs_survey_jrc_report_pubsy_online.pdf" target="_blank">PDF-Text.</a> - zero
9

从Github静态页面中显示PDF非常容易，您需要遵循以下过程：

  1. 使用您的Github用户名创建静态网站/存储库，例如，如果用户名为sumanbogati，则存储库将为sumanbogati.github.io
  2. 将所需的pdf放入该存储库
  3. 现在在任何您想要的位置找到Pdf的Url

例如，要在HTML网页中显示PDF

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

这是一个即时演示。
我将一个PDF文件上传到我的代码库，但链接无法使用，例如https://my.github.io/my.pdf。是否还需要其他步骤？ - Panfeng Li
我想出了解决方法。需要创建另一个包含 <embed src="https://my.github.io/my.pdf" type="application/pdf" /> 的 HTML 目录。 - Panfeng Li
你的存储库 my.github.io/my.pdf 没有配置，你是否已经使用 GitHub 用户名创建了存储库？就像我的情况一样，存储库是 sumanbogati.github.io，用户名是 sumanbogati。 - Suman Bogati
或者只需使用锚标签而不是嵌入。 - vighnesh153
这是一个非常优雅的解决方案，并且在桌面上运行得很好。然而，在移动设备上，embed 的效果不太好（在 Chrome、Firefox 和 Safari 上尝试过）。它只显示 PDF 的第一页，而且不允许滚动。因此，我建议将其与 ruifgmonteiro 的答案 结合起来。在 Markdown 文件中包含：如果嵌入的 PDF 没有正确显示，请<a href="https://my.github.io/my.pdf" target="_blank">点击此处。</a> <embed src="https://my.github.io/my.pdf" width="1000px" height="800px" /> - Arturo Moncada-Torres
3

我已经阅读了本节的大部分答案，但是大部分答案很难理解或者模糊不清。有一种更简单的方法可以在浏览器中显示来自Github的Pdf文件，因此以下是过程：

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

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

第三步：打开index.html并在下面添加嵌入标记：

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

在我的例子中，代码所在的文件将是：
 <embed src="https://winterishere.github.io/resume.pdf" width="100%" height="850px"/>
1

Use Google Docs viewer with a URL like:

https://docs.google.com/viewer?url={link_to_pdf}

e.g.

https://docs.google.com/viewer?url=https://username.github.io/folder/document.pdf
0
请随意尝试以下方法，因为它在我的Github页面上有效。
我们需要两个文件：
a)Resume.html
b)Resume.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。
0

我的解决方案：

  1. 将文件放在 https://my.github.io/files/paper.pdf 中。
  2. 添加链接 <a href="https://my.github.io/files/paper.pdf">mypdf</a>。
  3. 推送更改。

现在，如果您单击mypdf链接，它应该直接在浏览器中打开。

0

在 index.html 文件中使用以下代码：
<embed src="/Repo_Name/Resume_Name.pdf" width="100%" height="745px" />

这对我很有效，请查看
** 仅适用于笔记本电脑视图

我应该怎么做才能在所有设备上包括移动浏览器中正确显示PDF？ - raf
0
在你的代码库中创建一个名为index.html的文件，并将以下代码作为文件内容：
<iframe src="./yourfile.pdf" width="100% height=100%">
</iframe>

你的pdf文件需要与你的“index.html”文件在同一个目录下。这意味着你的pdf文件和index.html文件都需要上传到你的GitHub仓库中。然后，你可以使用GitHub页面指向你的“index.html”文件，在浏览器中显示pdf。

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

-1

将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文件：

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接