Web 使用Github页面在浏览器中打开PDF

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

---

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

不要直接从GitHub加载PDF，而是将其作为静态文件包含在GitHub页面分支中。这可以通过以下方式实现：

除上面列出的目录和文件外，其他每一个目录和文件（如

css

和

images

文件夹、

favicon.ico

文件等）都将被逐字复制到生成的站点。如果你想知道它们是如何布置的，这里有很多

因此，将PDF放在有意义的地方，例如在

pdfs/foo.PDF

中

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

有时候，在将

gh页面

分支推到GitHub之前预览你的Jekyll站点是很好的。然而，GitHub用于项目页面的类似子目录的URL结构使URL的正确解析变得复杂。下面是一种利用GitHub项目页面URL结构（

username.GitHub.io/Project name/

）的方法，同时保持在本地预览Jekyll站点的能力

在

\u config.yml

中，将

baseurl

选项设置为

/project name

–注意前面的斜杠和后面的斜杠的缺失

当引用JS或CSS文件时，请这样做：

{{site.baseurl}/path/to/CSS.CSS

–注意紧跟在变量后面的斜杠（就在“path”之前）

在进行永久链接或内部链接时，请这样做：

{{site.baseurl}}{{post.url}}

——请注意，这两个变量之间没有斜杠

最后，如果您想在使用

jekyll-serve

提交/部署之前预览站点，请确保向

--baseurl

选项传递一个空字符串，以便您可以正常查看

localhost:4000

上的所有内容（开始时没有

/project-name

）：

jekyll服务--baseurl'

---

因此，现在您可以使用

{{site.baseurl}}/pdfs/foo.PDF

链接到您的PDF，从Github静态页面在浏览器中显示PDF非常容易，因为您需要以下过程

使用Github用户名创建静态网站/存储库，例如，如果用户名为sumanbogati，则存储库将为sumanbogati.Github.io

将所需的pdf放入该存储库

现在，您可以在任何地方找到Pdf的Url

例如，在Html网页中显示pdf

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

---

这是一个。

您可以通过这种方式链接它

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

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

---

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

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

假设您的个人网站位于Github页面中，如下所示：

https://username.github.io

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

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

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

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

---

在

index.html

中使用此

这对我很有效，

---

**仅适用于笔记本电脑视图

在存储库中创建一个名为

index.html

的文件，其中仅包含以下代码：

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

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

---

现在使用

标记更好了，因为一些浏览器/设备不再支持

标记。

我已经阅读了本节中的大部分答案，但是其中大多数答案很难理解，或者太模糊，无法理解发生了什么。有一种更简单的方法可以做到这一点，因此为了在Github的浏览器中显示Pdf文件，以下是过程：

步骤1:使用您的Github用户名创建静态网站/存储库例如，如果用户名是

WinterISHER

，则存储库将是

WinterISHER.Github.io

步骤2:将所需的pdf放入该存储库，并在与pdf文件相同的位置添加一个

index.html

文件，例如：

resume.pdf

步骤3:打开

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"/>