(Sample)
「WebページからPDFやCSVファイルをダウンロードする機能」の作り方を詳しく説明していきます!
ダウンロードできるのは:
- 小説(テキスト)をPDF形式で
- 表データ(テーブル)をCSV形式で
このような機能は、レポート出力や帳票ダウンロードなど、業務アプリケーションではとてもよく使われるものです!
全体の構成をざっくり確認
このサンプルは以下の構成になっています:
部分 | 内容 |
---|---|
ボタン | PDFとCSVそれぞれのダウンロード用ボタン |
小説の本文 | 「吾輩は猫である」の一節を含むコンテンツ |
表(テーブル) | 名前や年齢などを表示するサンプル表 |
JavaScript | PDF出力と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出力に |
今後の学習の指針
今回の内容を理解できたら、次に学んでおくと役立つテーマはこちら!
- BlobとFileの違いと扱い方
- クライアントサイドでの動的ファイル生成
- Canvasと画像処理の基本
- サーバーサイドとの連携(Node.jsやPHP)
- 複数ページのPDF編集(jsPDFの拡張)
「印刷」「保存」「書き出し」は実務でのニーズが非常に高い機能です。ユーザーが喜ぶダウンロード体験を提供できるよう、ぜひ手を動かして試してみてください!応援しています!