HTMLからPDFへ！5つの手順で簡単変換

はじめに
●HTMLからPDFへの変換の基本
- ○1. HTMLファイルの用意
- ○2. PDFへの変換ツールの選択
●オンラインツールを使用する方法
●ブラウザの機能を利用する方法
●プログラムを使って変換する方法（Node.jsの例）
●カスタマイズと注意点
●応用例とサンプルコード
- ○応用例1：外部リンクを含むHTMLファイルの変換
- ○応用例2：複数のHTMLファイルを1つのPDFファイルにまとめる
まとめ

はじめに

この記事を読めば、HTMLからPDFへの変換が簡単にできるようになります。

まずは、基本的な作り方や使い方、対処法、注意点、カスタマイズ方法を解説し、さらに応用例とサンプルコードもご紹介します。

●HTMLからPDFへの変換の基本

○1. HTMLファイルの用意

HTMLからPDFへ変換するには、まずHTMLファイルが必要です。

簡単なHTMLファイルのサンプルを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルHTML</title>
</head>
<body>
  <h1>サンプルHTML</h1>
  <p>これはサンプルのHTMLファイルです。</p>
</body>
</html>

○2. PDFへの変換ツールの選択

HTMLをPDFに変換するには、いくつかの方法があります。

今回は、3つの方法を紹介します。

オンラインツールを使用する
ブラウザの機能を利用する
プログラムを使って変換する（Node.js, Pythonなど）

それぞれの方法について、順番に解説していきます。

●オンラインツールを使用する方法

○1. オンラインツールの選択

オンラインツールは、Webブラウザ上で動作するため、特別なソフトウェアをインストールする必要がありません。

ここでは、おすすめのオンラインツールを紹介します。

HTML2PDF (https://www.html2pdf.com/)
Sejda (https://www.sejda.com/html-to-pdf)

○2. HTMLファイルのアップロード

選んだオンラインツールのサイトにアクセスし、指示に従ってHTMLファイルをアップロードします。

○3.変換オプションの設定

オンラインツールによっては、変換前にオプションを設定することができます。

例えば、ページサイズや余白の設定など、必要に応じて選択してください。

○4. PDFへの変換

アップロードとオプション設定が完了したら、変換ボタンを押してHTMLファイルをPDFに変換します。

○5. PDFファイルのダウンロード

変換が完了したら、指示に従ってPDFファイルをダウンロードします。

●ブラウザの機能を利用する方法

○1. HTMLファイルをブラウザで開く

変換したいHTMLファイルをブラウザで開きます。

○2. 印刷ダイアログを開く

ブラウザのメニューから「印刷」を選択するか、キーボードショートカット（Ctrl+PまたはCmd+P）を使用して印刷ダイアログを開きます。

○3. PDFへの保存を選択

印刷ダイアログで、「保存先」や「プリンタ」の選択肢から「PDFに保存」または「Microsoft Print to PDF」を選択します。

○4. 保存オプションの設定

必要に応じて、ページ範囲や余白などの設定を行います。

○5. PDFファイルとして保存

保存ボタンを押して、HTMLファイルをPDFに変換し、指定した場所に保存します。

●プログラムを使って変換する方法（Node.jsの例）

○1. Node.jsとPuppeteerのインストール

まず、Node.jsをインストールし、続いてPuppeteerというヘッドレスブラウザをインストールします。

$ npm install puppeteer

○2. JavaScriptファイルの作成

下記のサンプルコードを参考に、HTMLファイルをPDFに変換するJavaScriptファイルを作成します。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('file:///path/to/your/html/file.html', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'output.pdf', format: 'A4'});
  await browser.close();
})();

○3. スクリプトの実行

コマンドラインで、下記のコマンドを実行してJavaScriptファイルを実行します。

これにより、HTMLファイルがPDFに変換されます。

$ node your_script.js

これらの方法を使って、HTMLファイルをPDFに変換できるようになりました。

それでは、次に、カスタマイズや注意点について解説します。

●カスタマイズと注意点

○1. ページサイズや余白の設定

変換する際にページサイズや余白を設定したい場合、オンラインツールやブラウザの機能を利用する場合は、変換オプションで設定が可能です。

プログラムを使用する場合は、page.pdf()メソッドのオプションで指定できます。

await page.pdf({path: 'output.pdf', format: 'A4', margin: {top: '1cm', right: '1cm', bottom: '1cm', left: '1cm'}});

○2. 変換時のスタイル調整

HTMLからPDFへの変換時にスタイルが崩れることがあります。

それを防ぐためには、CSSの@media printルールを使用して、印刷時専用のスタイルを指定できます。

@media print {
  body {
    font-size: 12pt;
  }
  h1 {
    font-size: 18pt;
  }
}

○3. JavaScriptの実行

オンラインツールやブラウザの機能を使った場合、JavaScriptが正常に実行されないことがあります。

その場合、プログラムを使って変換する方法を試してみてください。

●応用例とサンプルコード

○応用例1：外部リンクを含むHTMLファイルの変換

外部リンクを含むHTMLファイルを変換する際は、リンク先のコンテンツが正しく表示されるように、プログラムを使用して変換することがおすすめです。

await page.goto('https://example.com/with_external_links.html', {waitUntil: 'networkidle2'});

○応用例2：複数のHTMLファイルを1つのPDFファイルにまとめる

複数のHTMLファイルを1つのPDFファイルにまとめる場合は、プログラムを使用して、順番にページを開いてPDFに追加していくことができます。

const htmlFiles = ['file1.html', 'file2.html', 'file3.html'];
const browser = await puppeteer.launch();
const PDFMerger = require('pdf-merger-js');
const merger = new PDFMerger();

for (const htmlFile of htmlFiles) {
  const page = await browser.newPage();
  await page.goto(`file:///path/to/${htmlFile}`, {waitUntil: 'networkidle2'});
  const pdfBuffer = await page.pdf({format: 'A4'});
  const pdfPath = `${htmlFile}.pdf`;
  await require('fs').promises.writeFile(pdfPath, pdfBuffer);
  merger.add(pdfPath);
}

await merger.save('merged.pdf');
await browser.close();

このコードでは、htmlFiles配列に列挙されたHTMLファイルを順番に開いてPDFに変換し、pdf-merger-jsライブラリを使用して1つのPDFファイルにまとめています。

最後に、merged.pdfとして保存しています。