DOMをキャプチャしてPDFで保存する方法

はじめに

DOMを画像としてキャプチャし、PDFに挿入してダウンロードする方法を備忘録として残します。

使用モジュール

以下のモジュールを使用します。

html-to-image

バージョン：1.11.11
DOMを画像に変換できる

jspdf

バージョン：2.5.1
PDFを生成・保存できる

コード

import { toBlob } from 'html-to-image';
import { jsPDF } from 'jspdf';

// blobファイルを読み込む
const readBlobAsDataURL = (blob: Blob) => {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const result = reader.result as string;
      resolve(result);
    };

    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
};


// PDFをダウンロードする
const downloadPDF = async () => {
  const element = document.getElementById('app');

  if (!element) {
    return;
  }

  // blob形式に変換
  const blob = await toBlob(element);

  if (!blob) {
    return;
  }

  const dataUrl = await readBlobAsDataURL(blob);

  // jsPDFのインスタンスを生成
  const pdf = new jsPDF({
    orientation: 'p',
    unit: 'px',
    format: 'a4',
    compress: true,
  });

  // PDFの横幅
  const pdfWidth = pdf.internal.pageSize.getWidth();

  // 比率を計算
  const scale = pdfWidth / element.clientWidth;

  // 同じ比率でサイズを調整
  const width = element.clientWidth * scale;
  const height = element.clientHeight * scale;

  // PDFに画像を挿入
  pdf.addImage(dataUrl, 'JPEG', 0, 0, width, height);

  // PDFをダウンロード
  pdf.save('capture.pdf');
};

注意点

PDFのサイズが大き過ぎる場合、保存時にエラーになることがあります。
その場合は、複数ファイルに分けるなどの対処が必要になります。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。