(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の拡張)

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