kintoneの印刷画面で添付のPDFファイルを印刷する技

今回は、kintoneの印刷画面で添付のPDFファイルも印刷するカスタマイズです。
※DOM操作するので要注意！

完成イメージはこんな感じです。

アプリの準備

この記事のアプリをそのまま使います。

JavaScript

印刷画面に印刷ボタンを付けて、

kintone.events.on(["app.record.print.show"], (event) => {

  const client = new KintoneRestAPIClient();
  const sp = kintone.app.record.getSpaceElement("sp");

  event.record.添付ファイル.value.forEach(async (f) => {
    if (f.name.indexOf(".pdf") !== -1) {
      const data = await client.file.downloadFile({
        fileKey: f.fileKey,
      });
      // pdfをダウンロードしてiframeにセット
      const b = new Blob([data], { type: "application/pdf" });
      const ifr = document.createElement("iframe");
      ifr.src = URL.createObjectURL(b);
      // iframeは見えないほうがいいかな？
      ifr.style.display = "none";
      sp?.appendChild(ifr);
    }
  });

  // 添付ファイルも印刷するボタンをつけよう。
  const msp = document.getElementsByClassName("print-header-gaia");
  const btn = new Kuc.Button({
    text: "レコードも添付PDFも印刷する",
    type: "submit",
  });
  msp[0].appendChild(btn);
  btn.addEventListener("click", (event) => {
    window.print();
    const ifrs = document.getElementsByTagName("iframe");
    // 一つ一つ印刷する
    ifrs.forEach((ifr) => {
      ifr.contentWindow?.print();
    });
  });
});