エクスポートページのレイアウトカスタマイズ

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

このページの内容

アプリケーションの実行モードでページをPDFとしてダウンロードする際の出力PDFを、どのようにカスタマイズできるかを説明します。

提供状況

ページは、Creator のすべてのプランで利用できます。
スーパー管理者、管理者、開発者のみがページを作成および管理できます。

1. ページをPDFとしてエクスポートする際のカスタマイズ

Zoho Creator では、アプリケーションの実行モードでページをPDFとしてダウンロードできるようにするかどうかを選択できます。これは編集モードのページプロパティペインでPDFオプションを有効にすることで行います。これにより、実行モードでPDFボタンが有効になります。

事前に、ページ余白の設定、ヘッダーとフッターのカスタマイズ、ページ番号の表示など、ダウンロードされるPDFの基本的な属性を設定できます。これらのカスタマイズは、ページに挿入したHTMLスニペット内に記述しておく必要があり、その内容がダウンロードされたPDFに反映されます。

このような基本的な書式設定を行った出力PDFファイルの例を、以下の動画で確認できます。

1.1 PDF余白

構文

zcpage-spacing='pixelvalue'

構文の説明

本文の最初の<div>タグで、ページ余白をカスタム値に設定します。以下はサンプルコードスニペットです。

<本文>
<div zcpage-spacing='40'>
</div>
</body>

メモ: 既定では、PDFの余白値は四辺とも0pxでレンダリングされます。

1.2 ヘッダーとフッター

出力PDFにヘッダーまたはフッターのコンテンツを追加し、各ページに繰り返し表示するには、対象の<div>タグに属性として、それぞれzcpage-headerhtml='true'およびzcpage-footerhtml='true'を追加します。以下にサンプルコードスニペットを示します。

ヘッダー:

<div zcpage-headerhtml='true'><div クラス='align-center' style='text-align: center;'>
Zylker 従業員 Management
</div>

フッター:

<div zcpage-footerhtml='true'><div クラス='align-center' style='text-align: center;'>
Copyright 2024 @Zylker Technologies Pvt Ltd. All Rights Reserved.
</div>

出力PDFの一貫性が損なわれないよう、ヘッダー／フッター属性をtable要素やposition: fixedの要素で使用しないでください。
ヘッダーおよびフッター要素の高さは300px未満にする必要があります。
外部スタイルシートおよび継承されたスタイルプロパティは、ヘッダー／フッターのHTML要素には適用されません。インラインスタイルの使用を推奨します。
1つ以上のHTML要素にヘッダー／フッター属性が指定されている場合、最初のHTML要素に指定された属性のみがレンダリングされます。
1つのHTML要素には、ヘッダーかフッターのいずれか一方のみを指定できます。両方を指定した場合は、ヘッダーのみがレンダリングされます。
margin-top、margin-bottom、padding-top、padding-bottomなどのスタイルをヘッダー／フッター要素内で使用すると、ヘッダー／フッターの表示が崩れる可能性があります。

メモ: ヘッダー／フッター用には、対象HTML要素で次の上下余白属性の使用を検討してください。

zcpage-headerspacing-top='pixelvalue'
zcpage-headerspacing-bottom='pixelvalue'
zcpage-footerspacing-top='pixelvalue'
zcpage-footerspacing-bottom='pixelvalue'

1.3 ページ番号

構文

現在のページ番号を表示するには、次を追加します。

<div クラス='zcpage-pagenumber'> <span クラス='currentPageNumber'> </span> </div>

総ページ数を表示するには、次を追加します。

<div クラス='zcpage-pagenumber'> <span クラス='totalPageNumber'> </span> </div>

構文の説明

フッターコンテンツが指定されている場合、エクスポートされたページのURL内のzc_PageNumberパラメーターは機能しません。そのような場合は、上記の構文をヘッダーまたはフッターのHTML内に追加することで、ページ番号を表示できます。

たとえば、次のHTMLコードを使用すると、PDFの各ページのフッターに 1 of n、2 of n、…、n of n の形式でページ番号が表示されます。

<div zcpage-footerhtml='true'>
<div クラス='zcpage-pagenumber'>
<span クラス='currentPageNumber'> </span> of <span クラス='totalPageNumber'> </span></div>
</div>