(Sample)

「WebページからPDFやCSVファイルをダウンロードする機能」の作り方を詳しく説明していきます！

ダウンロードできるのは：

  • 小説（テキスト）をPDF形式で
  • 表データ（テーブル）をCSV形式で

このような機能は、レポート出力や帳票ダウンロードなど、業務アプリケーションではとてもよく使われるものです！

全体の構成をざっくり確認

このサンプルは以下の構成になっています：

部分内容
ボタンPDFとCSVそれぞれのダウンロード用ボタン
小説の本文「吾輩は猫である」の一節を含むコンテンツ
表（テーブル）名前や年齢などを表示するサンプル表
JavaScriptPDF出力とCSV作成のロジックを記述

PDFの生成処理：html2canvas + jsPDFの合わせ技！

使用ライブラリ

  • html2canvas：HTML要素を「画像」に変換
  • jsPDF：画像やテキストをPDFとして保存

これらを組み合わせることで、「HTMLを画像に → 画像をPDFに」という流れを作ります。

PDF化の流れを追ってみよう！

html2canvas(document.getElementById("content"), {
  scale: 2,
  useCORS: true,
}).then(function (canvas) {
  const imgData = canvas.toDataURL("image/png");
  const pdf = new jsPDF("p", "mm", "a4");
  ...
  pdf.save("sample.pdf");
});
  • scale: 2：画像を高解像度に（ぼやけ防止）
  • useCORS: true：外部画像を使う場合の対応
  • toDataURL()：画像データをBase64形式に変換
  • addImage()：PDFの中に画像として追加
  • save()：実際にダウンロード処理

ページが長い場合の対処

while (heightLeft >= 0) {
  pdf.addPage();
  pdf.addImage(...);
  heightLeft -= pageHeight;
}

長い文章をPDF化するとき、1ページに収まらない部分は自動で次ページへ分割されるように工夫されています。

CSVの作成：JavaScriptで表を加工！

CSVとは「Comma Separated Values（カンマ区切りの値）」の略で、表形式のデータを保存するのに使われます。Excelで開くと表として見える、アレです。

テーブルをCSVに変換する処理

for (let i = 1; i < table.rows.length; i++) {
  let rowData = [];
  for (let cell of table.rows[i].cells) {
    rowData.push(cell.textContent);
  }
  csvContent += rowData.join(",") + "\n";
}
  • 各セルのテキストを ,（カンマ）で区切る
  • 各行は \n（改行）で区切る

この2つを繰り返すことで、CSV形式のテキストができあがります。

文字化け防止！UTF-8 BOMの追加

const BOM = "\uFEFF";

CSVファイルをExcelで開くときに日本語が文字化けしないようにするおまじないです。これを入れておくと、見出しも名前もきちんと表示されます！

実行結果の見た目と操作感

PDF出力ボタン

  • 青いボタンで「小説をPDFダウンロード」
  • 押すと小説の部分だけが画像としてPDFに変換されて保存される

CSV出力ボタン

  • 緑のボタンで「テーブルをCSVダウンロード」
  • 押すと、画面に表示された表（ID, 名前, 年齢, 国）の内容がCSVファイルとしてダウンロードされる

応用アイデア

あなたがこの基本的な仕組みを理解したら、次のステップとしてこんな応用ができます！

応用機能内容
PDFに日付やページ番号を入れるpdf.text()でページにテキスト追加可能
複数の表やグラフをまとめる各コンテンツを画像に変換して連結
サーバーにファイルを送信BlobをFormDataに入れてPOST送信
JSON → CSV変換フォームやAPIのデータをCSV出力に

今後の学習の指針

今回の内容を理解できたら、次に学んでおくと役立つテーマはこちら！

  1. BlobとFileの違いと扱い方
  2. クライアントサイドでの動的ファイル生成
  3. Canvasと画像処理の基本
  4. サーバーサイドとの連携（Node.jsやPHP）
  5. 複数ページのPDF編集（jsPDFの拡張）

「印刷」「保存」「書き出し」は実務でのニーズが非常に高い機能です。ユーザーが喜ぶダウンロード体験を提供できるよう、ぜひ手を動かして試してみてください！応援しています！