2024/07/15

HTML画面をPDFにする

今回stackblitzでデモを作ったのですが、どうやらstackblitzでは、html2canvasでhtmlを画像に変換する際に、600×400.pngが404になってしまうようです。実際にダウンロードし、ローカル環境で確認すると、画像は表示されます。

複数枚PDFがある時

html2canvasで処理をしている時、描画するものが少ないページは早く処理が終わり、画像などがあるページは処理が遅れます。なのであらかじめPDFにする順番(id)を持たせておきます。
Promise.all() を使って並列で処理し、全ての処理が終わったらidで正しい順番に並び替えます。

   const options: any = {
      type: 'png',
      windowWidth: 1080, //ブラウザサイズ
      width: 1080, //キャプチャするエリアのサイズ
    };

    // 中略

     type imgDataArrayType = {
        id: number;
        imgData: string;
        width: number;
      };
      let imgDataArray: imgDataArrayType[] = [];

      // HTMLを画像にする
      const promises = Array.from(downloadPdfPage).map((target, i) => {
        return html2canvas(target as HTMLElement, options).then((canvas) => {
          const imgData = canvas.toDataURL('image/png');
          const width = doc.internal.pageSize.width;
          return {
            id: i, //PDFにする順番
            imgData: imgData,
            width: width,
          };
        });
      });

      //Promise.all()を使って、並列に実行する
      imgDataArray = await Promise.all(promises);

      // 全ての処理が終わったら、idでソート
      imgDataArray.sort((a, b) => a.id - b.id);

imgDataArrayを元にPDFを作成

      const doc = new jsPDF('p', 'pt', 'a4'); //設定をA4にする

      // 中略 

      //pdf生成
      imgDataArray.forEach((data, index) => {
        doc.addImage(data.imgData, 'PNG', 30, 40, data.width, 0);
        if (index < imgDataArray.length - 1) {
          doc.addPage();// PDFを1枚追加
        }
      });

      doc.save('sample.pdf'); //sample.pdfという名前で出力する