【jsPDF】生成したPDF情報をDBに保存する!

全般

はじめに

こんにちは!竹村です。そろそろTシャツで外出できる季節になってきて、心なしかテンションが上がっております。

さて、以前テックブログにて「jsPDFを使ってKonvaのstage要素をPDF化する際に困った話」というタイトルで記事を投稿しましたが、今回は、前回の内容から派生させ、生成したPDFをバイナリデータ化してDBに保存する方法をご紹介します!

jsPDFを使ってKonvaのstage要素をPDF化する際に困った話
こんにちは!話題のELDEN RINGを買ったはいいけどあまり遊べていない竹村です。現場業務にて、JavaScriptのフレームワークであるKonva.jsとjsPDFを使って、画面に描画されているstage要素をPDF化しようと...

blob型で出力したバイナリデータをbase64に変換する

PDFインスタンスに対してaddImageした後、outputメソッドの引数に”blob”を渡し、バイナリデータをblob型で生成します。

function convertPdf(self) {

  var stage = self.$refs["stage"];
  var getStage = stage.getStage();


  var width = getStage.attrs.width;
  var height = getStage.attrs.height;

  //pdfインスタンスを生成
  var pdf = new jsPDF({
    orientation: "l",
    unit: "px"
    format: [width, height],
    compress: true,
  });

  var scale = getStage.getScale();
  var position = getStage.getPosition();

  getStage.setScale({ x: 1, y: 1 });
  getStage.setPosition({ x: 0, y: 0 });

  //pdf化処理
  var output = getStage.toImage({
    callback(image) {
      //pdfインスタンスにimageを追加
      pdf.addImage(image, 10, 10, width, height);

      getStage.setScale(scale);
      getStage.setPosition(position);

      //pdfインスタンスからblob生成
      var blob = pdf.output("blob");

      //FileReaderオブジェクトを生成し、blobデータを読み込む
      var reader = new FileReader();
      reader.readAsDataURL(blob);

      //blobデータ読込完了後、保存API呼び出し
      reader.onload = function () {
        savePdfData(self, reader.result);
      };
    },
    mimeType: "image/png",
    x: 10,
    y: 10,
    width: width,
    height: height,
  });
}

//保存API
async function savePdfData(self, result) {
    const response = await self.$postAjax("保存処理APIのURL", result);
}

今回はblobで出力しましたが、arraybuffer等の他の形式でも出力できます。
詳しくは公式ドキュメントをご参照下さい。

jsPDF - Documentation

blobデータをFileReaderのreadAsDataURLで読み込むことで、FileReaderのresult属性に
base64エンコーディングされた文字列が格納されます。
読み込みが完了した後、reader.onloadが発火し、保存APIにreader.resultを渡しています。

終わりに

いかがでしたでしょうか?手軽にPDFをダウンロードできるjsPDFですが、DBにバイナリデータを保存する事でPDFを扱える幅が広がりますね!
リッチな公式ドキュメントも用意されていますし、実際の開発現場でも十分に導入できるライブラリだと思います。

ではまたお会いしましょう!

コメント