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

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

このページの内容

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

提供状況

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

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

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

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

構文

zcpage-spacing='pixelvalue'

構文の説明

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

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

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

ヘッダー:

フッター:

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

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

構文

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

<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='真'>
<div クラス='zcpage-pagenumber'>
<span クラス='currentPageNumber'> </span> of <span クラス='totalPageNumber'> </span></div>
</div>