web-dev-qa-db-ja.com

PDFをGithub Pagesを搭載したブラウザで開く

GitHubページを使用して自分のウェブサイトをホストしています。 PDFファイルを訪問者がブラウザで直接開くことができるようにしたいのですが、PDFファイルをGitHub PagesにアップロードしてリンクするとGitHubのビューアで開きます。PDFをブラウザで開く方法はありますか？これらの国ではこれらのサービスを利用できないため、ドキュメントをDropboxやGoogleドライブにアップロードしたくありません。 。

生のURLを使用すると、ダウンロードにつながります。しかし、ブラウザでファイルを開いてもらいたいのですが。

webgithubgithub-pages
12
Yan Song

PDFをロードする代わりに、静的ファイルとしてGitHub Pagesブランチにインクルードします。これは、単純に ファイルをソースツリーのどこかに置く）ことで実行できます =：

上記以外のすべてのディレクトリおよびファイル（cssおよびimagesフォルダー、favicon.icoファイルなど）は、生成されたサイトにそのままコピーされます。それらがどのように配置されているかを知りたければ、たくさんの すでにJekyllを使用しているサイト があります。

PDFを、たとえばpdfs/foo.pdfのような意味のある場所に配置します。

これへのリンクを作成するにはPDFローカルでもGitHubページでも機能します Jekyllは以下を推奨します （特にポイント＃2に注意してください）：

gh-pagesブランチをGitHubにpushする前にJekyllサイトをプレビューすると便利な場合があります。ただし、GitHubがプロジェクトページに使用するサブディレクトリのようなURL構造は、URLの適切な解決を複雑にします。 Jekyllサイトをローカルでプレビューする機能を維持しながら、GitHubプロジェクトページのURL構造（username.github.io/project-name/）を利用する方法を次に示します。

  1. _config.ymlで、baseurlオプションを/project-nameに設定します。先頭のスラッシュと末尾のスラッシュの不在に注意してください。

  2. JSまたはCSSファイルを参照するときは、次のようにしてください。{{ site.baseurl }}/path/to/css.css –変数の直後（「パス」の直前）のスラッシュに注意してください。

  3. パーマリンクまたは内部リンクを実行するときは、次のようにします。{{ site.baseurl }}{{ post.url }} – 2つの変数の間にnoスラッシュがあることに注意してください。

  4. 最後に、jekyll serveを使用してコミット/デプロイする前にサイトをプレビューする場合は、必ず--baseurlオプションに空の文字列を渡して、通常はlocalhost:4000ですべてを表示できます（最初に/project-nameなしで）：jekyll serve --baseurl ''

これで、PDFに{{ site.baseurl }}/pdfs/foo.pdfでリンクできます。

9
Chris

個人のWebサイトが次のようにGithubページでホストされているとします。

https://username.github.io

リポジトリの名前はsername.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>
3
ruifgmonteiro

Github静的ページからブラウザにPdfを表示するのは非常に簡単です。そのため、プロセスに従うアプローチが必要です。

  1. Githubユーザー名を使用して静的なWebサイト/リポジトリを作成します。たとえば、ユーザー名がsumanbogatiの場合、リポジトリはになります。 sumanbogati.github.io
  2. 目的のPDFをそのリポジトリに配置します
  3. 次に、PdfのURLを好きな場所に配置します

たとえば、HTML WebページにPDFを表示するには

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

これは インスタントデモ です。詳細は こちら をご覧ください。

2
Suman Bogati

このようにリンクできます

<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を使用する代わりにファイルをインポートすることでも機能すると思いますが、私はそれでテストしていません。

0
Jun711

PDFファイルを次のようなフォルダに配置します; www.website/pdf/example.pdfこれにより、ルートディレクトリ外へのファイルのダウンロードが停止します。

手順は次のとおりです。

1。メインディレクトリに新しいファイルを作成します。

2。ファイル/ pdf /に名前を付けて保存します。

。 example.pdfファイルをこのフォルダにアップロードします

結果::PDFは、www.website/pdf/example.pdfで表示できます

4。 .pdf URLを回避するオプションの手順。このフォルダーにindex.htmlファイルを作成し、PDF埋め込みタグを使用して空のhtmlファイルを作成します。

0
Shippable.ls