kintoneで作成した帳票をカスタマイズで印刷してみた

  1. Home
  2. /
  3. ブログ
  4. /
  5. kintoneカスタマイズ
  6. /
  7. kintoneで作成した帳票をカスタマイズで印刷してみた

みなさんは、kintoneのレコード詳細を印刷することはありますか?

見積書や請求書など、まだまだ紙を必要とする場面は多いですよね。

kintone標準機能の印刷では、レコードそのままのような感じでイマイチ…ということで、多くの方はソウルウェア社の「レポトン」や、トヨクモ社の「PrintCreator」などのプラグインを使っているのではないでしょうか?

ただ、プラグインは買い切り版でもサブスクリプション版でも、それなりのコストがかかってしまいます。

そこで、Javascriptでのカスタマイズで印刷やpdf化までできないか?と思い、実際に試してみました。

kintoneアプリストアの見積書アプリを印刷してみる

kintoneアプリストアで公開されている「商品見積書パック」の「見積書」アプリを、フォームはそのままで、色々な印刷方法を試してみます。

今回は、このアプリを使用します

①kintone標準機能で印刷

まずは、レコードの印刷から印刷をしてみます。(・・・から、レコード印刷です。)

標準機能で印刷した場合のイメージ

まぁ、最低限ですよね。とりあえず紙に出せます。という機能ですから…

②レコードの情報をJavaScriptで取得し、HTMLで別ウィンドウに再構成。

次に、インラインHTML/CSSを含むJavaScriptでアプリにカスタマイズをし、印刷ボタンを押したら、指定の様式に再構成して印刷。といった流れで、印刷用の体裁を作成してみました。

HTML,CSSでレイアウトを決めて出力しました

どうでしょうか?

カスタマイズで、見た目、定型となる文章(ご紹介の件~の文章など)をフォーマットとして持つことができます。

また、フィールドとして配置しなくても、税率や消費税額を処理側で計算することも可能です。

(消費税などはフィールドで設定したほうが理想です。今回は、あくまで、アプリフォームは変えない想定なので…)

もちろん、自社名や、住所、電話番号、印影なども持たせることができますよ。

③再構成したHTMLをPDFとして添付ファイルに保存

こちらは番外編です。

印刷から、「Microsoft print to PDF」などで、PDFに保存することはできますが、せっかくならレコードに直接保存したくないですか?

そこで、フォームに1つ添付ファイルフィールドを設置し、「発行したPDFを直接保存する。」というカスタマイズをやってみました。

※今回のカスタマイズには、PDF作成の部分で、外部ライブラリ「html2pdf.js」を使用しています。

無事、pdf化&保存ができました。

メール添付などのお客様へは印刷する必要はないですから、これで十分ですよね。

もちろん、カスタマイズで、ファイル名も指定できるので、「電子帳簿保存法」に合わせたファイル名にすることも可能です。(今回は、御見積書{見積日}_{お客様名}_{金額}.pdfで指定。)

まとめ

いかがでしたでしょうか?

kintoneを導入する目的として、ペーパレスやDX化を掲げることは多いと思いますが、どうしても紙が必要!という場面はまだまだ残りそうです。

そういった際に、紙に出す業務だけExcelのまま・・・ではなく、kintoneに取り入れて印刷ということも考えてみてはいかがでしょうか?

エーアイティ研究所では、基本機能、プラグインはもちろんのこと、カスタマイズのご相談もお待ちしております。kintone化をあきらめていた業務などがございましたら、お気軽にお問い合わせください。