バナー画像

ホームページの内容をPDFに変換

ホームページを閲覧していて、「ページを保存して、自分のPC内に持っておきたいな」と思ったことはありませんか?

ブラウザの「ブックマーク」にURLを保存して、いつでも閲覧できるようにするのも、一つの方法ですが、オフライン環境で見る時や、URLのリンクが切れて、サイトにアクセスできない場合など、「ブックマーク」機能は、ずっとサイトの内容を保存しておくときには向いていません。

現在の主要なブラウザには、ホームページの内容をPDFに変換する機能があります。PDFに変換して自分のPC内にファイルを保存しておけば、オフライン環境や、URLのリンク切れなどの問題も発生せず、いつでもホームページの内容を閲覧できます。

この記事では、ホームページ(HTML)の内容を、PDFに変換する便利な方法を解説します。

ブラウザの機能でHTMLをPDFに変換

まずは、Google Chromeなどのウェブブラウザの機能を利用して、ホームページの内容をPDFに変換する方法を解説します。特別なツールのインストールの必要もなく、普段使っているブラウザでPDFに変換できるため、最も手軽な方法です。

「Google Chrome」でPDFに変換する方法

Windows版のGoogle Chromeでの操作手順で解説します。

まず、Google ChromeでPDFに変換したページ(URL)を表示します。その後、メニューの[印刷]をクリックして、印刷画面を表示します。

送信先に「PDFに保存」を選択し、「保存」ボタンをクリックします。

PDFファイルの保存先を選択し、「保存」ボタンをクリックすると、ホームページの内容をPDFに変換したファイルが保存されます。

「Internet Explorer」でPDFに変換する方法

残念ながら、Internet Explorerには、標準でホームページをPDFに変換する機能がありません。ただし、「Adobe Acrobat DC」がPC上にインストールされていれば、「Adobe PDF ツールバー」からPDFに変換できます。

「Adobe PDF ツールバー」の詳しい操作方法は、以下のリンクから確認できます。
https://helpx.adobe.com/jp/acrobat/kb/cq07070739.html

OSにWindows 10を使用している場合は、Windows10から標準利用できる仮想プリンタの「Microsoft Print to PDF」を利用してPDFに変換もできます。

「Microsoft Edge」でPDFに変換する方法

Microsoft Edgeには、ホームページの内容をPDFに変換する機能がありません。Internet Explorerの時と同様に、Windows10から標準利用できる仮想プリンタの「Microsoft Print to PDF」を利用してPDFに変換します。

「Safari」でPDFに変換する方法 (Mac)

Macの標準ブラウザであるSafariでも、ホームページの内容をPDFに変換する機能があります。

まず、SafariでPDFに変換したいページを開き、右クリック → [ページをプリント]をクリックして印刷画面を表示します。

画面下のプルダウンメニューより、[PDFとして保存]を選択します。

PDFファイルの保存先を選択し、「保存」ボタンをクリックすると、ホームページの内容をPDFに変換したファイルが保存されます。

WebツールでHTMLをPDFに変換

ホームページのURLを指定すると、PDFに変換してくれるWebサービスもあります。ブラウザがあれば簡単にPDFに変換できるため、こちらも便利です。

今回は、PDF変換サービスの中から、次の2つのサービスを紹介します。

Soda PDF ONLINE

「Soda PDF ONLINE」は、PCにインストールするPDF変換ソフトを提供する「LULUソフトウェア」社が提供する、オンラインPDF変換ツールです。

使い方は簡単で、テキストボックスにPDFに変換したいページのURLを指定し、「PDFを取得」ボタンをクリックするだけでPDF変換が行われます。

PDFへの変換が終了すると、ブラウザからダウンロードできます。

CometDocs

「CometDocs」は、さまざまな形式のファイルを、オンラインでPDFに変換できるWebサービスです。HTMLだけでなく、画像(.bmp, jpg, png, gif)、Excel (xls, xlsx)、PowerPoint (ppt, pptx)、Word (doc, docx)などのファイルをPDF化する機能もサポートしています。

使用方法は、「Upload File」ボタンでPDFに変換したいファイルを選択した後、変換後のファイル形式を選択し、ダウンロードリンク送信用のメールアドレスを入力します。

PDFへの変換が完了すると、指定したメールアドレスにダウンロード用のURLを送信されます。

JavaScriptでPDF変換 (pdfMake)

少し変わった方法として、JavaScriptでPDFを出力する方法もあります。Webサイト側にPDF出力機能を実装する必要がありますが、例えば、簡単な見積書などの一覧表であれば、クライアントサイドのJavaScriptだけで実装できます。

JavaScriptでPDFを出力する ライブラリはいくつかりますが、今回は「pdfMake」というライブラリを紹介します。

ダウンロード

pdfMakeは、githubの下記URLからダウンロードできます。サイトにアクセス後、「clone or download」でZIP形式のファイルをダウンロードします。

https://github.com/bpampuch/pdfmake

ダウンロードしたZIPファイルを解凍すると、沢山のファイルが展開されますが、必要なファイルは次の2つです。

サンプルプログラムの作成

適当な名前でhtmlファイルを作成し、次のコードを貼り付けてください。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF作成サンプル</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="pdfmake/pdfmake.min.js"></script>
<script src="pdfmake/vfs_fonts.js"></script>
</head>
<body>
  <button id="create">PDF作成</button>

  <script>
    document.getElementById("create").addEventListener("click", function() {
      // contentにPDFに出力する内容を設定
      var pdfContent = {content: [
        { text: "pdfmake", fontSize: 20 },
        { text: "Sample PDF Text", margin: [ 5, 5, 5, 20 ]},
        {
          layout: 'lightHorizontalLines', // optional
          table: {
            // headers are automatically repeated if the table spans over multiple pages
            // you can declare how many rows should be treated as headers
            headerRows: 1,
            widths: [ '*', 'auto', 100, '*' ],

            body: [
              [ 'First', 'Second', 'Third', 'The last one' ],
              [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
              [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
            ]
          }
        }
      ]};
      // PDFを生成してブラウザに表示
      pdfMake.createPdf(pdfContent).open();
    })      
  </script>
</body>
</html>

■ 実行結果

ポテパンダの一言メモ

pdfmakeは、標準では日本語が正しく出力できません(文字化けします)。日本語を正しくする出力するには、カスタムフォントの設定を行う必要があります。カスタムフォントの設定方法は、pdfmakeの公式ドキュメントを参照してください。

https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/

便利なHTML⇒PDF変換機能を利用しよう

ホームページの内容をPDFに変換する方法を解説してきました。PDFにホームページの内容を保存しておくと、インターネットに接続してない時でも、いつでも内容を見ることができ、便利です。

【関連記事】
HTMLのcanvasタグで描画処理を学ぼう!基本的な使い方を初心者向けに徹底解説!

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。