真夜中にこんばんは。
2か月ぶり更新の脇保です。
今回は、JavaScriptのPDF生成ライブラリ「PDFMake.js」について、書こうと思います。
「PDFMake.js」とは、JavaScript(フロントエンド)だけで、サーバサイドに依存することなく、
PDFが作れちゃうという、何とも魅力的なライブラリであります。
で、今回のお題。
PDFMake、画像の回転対応してないやん（TT）。
「じゃぁ、対応させてしまえ！！」と、PDFMakeを小改良したのが、
今回のお話です。
そもそも、PDFMakeで画像回転なんて出来るのか？？ですが、
出来るっぽい訳です。
なにせ、どうもCSS３とCanvas（Html5）を使ってる感満載なわけです。
じゃぁ、引数をきちんと渡してあげれば、良いんでしょ、ってなった訳です。
先ず、pdfmake.jsを、ブラウザから呼び出しながら、エディタで見ながら、
相互に見比べながら、デバッグデバッグ。
すると、色々と判ってくるわけです、ソース追っかけてると。
怪しそうな関数を見つけて、それを追っかけていくと・・・ありました！
2389行目。
function renderImage(image, x, y, pdfKitDoc) {
pdfKitDoc.image(image.image, image.x, image.y, { width: image._width, height: image._height });
}
一つ目はこの関数です。こいつの中にある関数に、引数を加えてやります。
function renderImage(image, x, y, pdfKitDoc) {
pdfKitDoc.image(image.image, image.x, image.y, { width: image._width, height: image._height , transform:image.transform});
}
こんな感じ。
｛｝の中の引数に、以下を加えるわけです。
「transform:image.transform」
それではお次。
66838行目になります。
this.transform(w, 0, 0, -h, x, y + h);
を、
this.transform(w, Number(options.transform), Number(options.transform), -h, x, y + h);
に変更します。
「0」を、「Number(options.transform)」
に書き換えるわけです。
で、保存。
次は、呼び出し側。
var docDefinition = {
content: [
{
image:img,//Base64フォーマットのテキスト(画像を変換したもの)
position: ‘absolute’,
x: 20,//Left
y: 20,//Top
width:200,//横幅
height: 200,//縦幅
transform: 50//Rotate。傾き
}
]
};
pdfMake.createPdf(docDefinition).download(‘test.pdf’);
の箇所で、「 transform: 50」と追加しかしてやります。
これで、完了です。
こんな感じに画像を回転させてPDFを生成出来るようになります。
うん、便利だ。
それでは。