kintoneでPDFを出力する

仕様の検討

kintoneのプラグインなどいろいろ探せば有償無償をふくむめてあると思いますが、今回はPDF-libを使う方法を試してみました。

PDF-libを動かすための準備

kintoneの「アプリの設定」ー「JavaScript / CSSでカスタマイズ」にて以下のライブラリを登録します。
https://unpkg.com/pdf-lib
https://unpkg.com/@pdf-lib/fontkit/dist/fontkit.umd.js

こちらから日本語フォントをダウンロードしました。
http://jikasei.me/font/rounded-mgenplus/
今回はrounded-mgenplus-1m-regular.ttfを使用させていただきました。

テンプレートとなるPDFを準備します。
template.pdf

テンプレートとなるPDFとフォントをbase64でエンコード

kintone上にPDFやフォントファイルを登録することが出来ないので、いろいろ考えた結果、base64に変換しJavascript内に埋め込むことにしました。以下のような感じで文字列にします。サイズの大きなファイルになるので注意します。base64への変換は別途自作のツールを作成しました。

template.js

const pdf64 = 'JVBERi・・（省略）・・SVFT0Y=';

font.js

const font64 = 'AAEAAA・・（省略）・・GSf9A=';

Javascriptのサンプル

Javascriptからは以下のような感じで利用すればよさそうです。

sample.js

const encodeBinaryString = binaryString => Uint8Array.from(
  binaryString,
  binaryChar => binaryChar.charCodeAt(0),
);
      
const pdfBytes = encodeBinaryString(atob(pdf64));
const pdf = await PDFLib.PDFDocument.load(pdfBytes);
    
pdf.registerFontkit(fontkit);
const font = await pdf.embedFont(encodeBinaryString(atob(font64)));

const pages = pdf.getPages();
const page = pages[0];

page.drawText('あいうえお', { font: font, size: 7, x: 512, y: 786.5 });

・・（省略）・・

window.open(URL.createObjectURL(new Blob([await pdf.save()], { type: 'application/pdf' })), 'pdf');

kintone上の設定

感想

base64で記述したPDFのテンプレートやフォントを読み込んで変換するのに多少の時間がかかりますが、無事に動作させることが出来ました。kintone以外のサーバーに別途テンプレートを配置してもよいのですが、クロスドメインになるため、CORSとbasic認証などの相性の関係で断念しました。テンプレートからPDFを作成できるといろいろ便利なので、これからキントーンを活用する場面が広がりそうです。