目次
はじめに
こんにちは!竹村です。そろそろTシャツで外出できる季節になってきて、心なしかテンションが上がっております。
さて、以前テックブログにて「jsPDFを使ってKonvaのstage要素をPDF化する際に困った話」というタイトルで記事を投稿しましたが、今回は、前回の内容から派生させ、生成したPDFをバイナリデータ化してDBに保存する方法をご紹介します!
https://www.miracleave.co.jp/contents/1402/post-1402/
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等の他の形式でも出力できます。
詳しくは公式ドキュメントをご参照下さい。
blobデータをFileReaderのreadAsDataURLで読み込むことで、FileReaderのresult属性に
base64エンコーディングされた文字列が格納されます。
読み込みが完了した後、reader.onloadが発火し、保存APIにreader.resultを渡しています。
終わりに
いかがでしたでしょうか?手軽にPDFをダウンロードできるjsPDFですが、DBにバイナリデータを保存する事でPDFを扱える幅が広がりますね!
リッチな公式ドキュメントも用意されていますし、実際の開発現場でも十分に導入できるライブラリだと思います。
ではまたお会いしましょう!