Zoho Invoiceの請求書に印影を挿入する方法

オンラインで見積書・請求書を作成できるサービス Zoho Invoice に対して多数の方から印影を追加する機能についてのお問い合わせをいただいております。
該当の機能自体はありませんが、ちょっとした工夫で見積書や請求書に印影を追加することが可能です。その方法について説明します。
まず、請求書のHTMLの編集画面を開いてください。HTMLの編集画面は、請求書のテンプレートの編集画面のツールバーの「<>」という形のボタンをクリックすると開けます。
さて、ここからが大事です。印影を追加するには、印影の画像用のHTMLタグを挿入する必要があります。この時、次のいずれかの作業を行ってください。
  1. 印影の画像をあらかじめWeb上にアップロード
  2. 印影の画像データをBase64でエンコード
1の場合
Web上に画像をアップロードし、そのURLを取得し、imgタグのsrc属性に該当のURLを指定してください。
例:http://www.zoho.jp上に画像をアップロードした場合
画像のURL
挿入するタグ
 <img src=”http://www.zoho.jp/invoice/images/innei-zj.gif” alt=”印影”>
2の場合
エンコードしたデータをimgタグのsrc属性に指定してください。
例:GIF形式の画像をエンコードした場合
 <img alt=”印影の画像” src=”data:image/gif;base64,<エンコードしたデータ>“>
なお、実際に指定する場合は、幅や高さ、画像の位置などを指定したい場合があるかと思います。その場合は次のような形式になります。
1の場合
<img src=”http://www.zoho.jp/invoice/images/innei-zj.gif” alt=”印影” style=”position: relative; top: 80px; left: 80px; width: 100px; height: 100px;z-index:-1;”>
2の場合
<img alt=”印影” style=”position: relative; top: 80px; left: 80px; width: 100px; height: 100px;z-index:-1;” src=”data:image/gif;base64,R0lGODlhbgB8APcAAAAAAIAAAA<長くなりますので省略>uyJFuyJnuyKJuyKruyCBkQADs=”>
具体的な方法に関しては、こちらの記事も参考になります。
注意:いずれの方法でも印影を挿入することは可能ですが、1の場合は印影の画像をWeb上に公開する必要があること、2の場合はエンコードの操作やデータはユーザーの方の責任で行っていただくことにご注意ください。
実際に生成したPDFでは次のように表示されます。ぜひご活用ください!

PAGE TOP