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

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

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

このページの内容
アプリケーションの実行モードでページをPDFとしてダウンロードする際の出力PDFを、どのようにカスタマイズできるかを説明します。
提供状況
  1. ページは、Creator のすべてのプランで利用できます。
  2. スーパー管理者、管理者、開発者のみがページを作成および管理できます。

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

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

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

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


1.1 PDF余白

構文
zcpage-spacing='pixelvalue'
構文の説明
本文の最初の<div>タグで、ページ余白をカスタム値に設定します。以下はサンプルコードスニペットです。
  1. <本文>
  2. <div zcpage-spacing='40'>
  3. </div>
  4. </body>
Notes
メモ: 既定では、PDFの余白値は四辺とも0pxでレンダリングされます。
出力PDFにヘッダーまたはフッターのコンテンツを追加し、各ページに繰り返し表示するには、対象の<div>タグに属性として、それぞれzcpage-headerhtml='true'およびzcpage-footerhtml='true'を追加します。以下にサンプルコードスニペットを示します。

ヘッダー:
  1. <div zcpage-headerhtml='true'><div クラス='align-center' style='text-align: center;'>
  2. Zylker 従業員 Management
  3. </div>

フッター:
  1. <div zcpage-footerhtml='true'><div クラス='align-center' style='text-align: center;'>
  2. Copyright 2024 @Zylker Technologies Pvt Ltd. All Rights Reserved.
  3. </div>
  1. 出力PDFの一貫性が損なわれないよう、ヘッダー／フッター属性をtable要素やposition: fixedの要素で使用しないでください。
  2. ヘッダーおよびフッター要素の高さは300px未満にする必要があります。
  3. 外部スタイルシートおよび継承されたスタイルプロパティは、ヘッダー／フッターのHTML要素には適用されません。インラインスタイルの使用を推奨します。
  4. 1つ以上のHTML要素にヘッダー／フッター属性が指定されている場合、最初のHTML要素に指定された属性のみがレンダリングされます。
  5. 1つのHTML要素には、ヘッダーかフッターのいずれか一方のみを指定できます。両方を指定した場合は、ヘッダーのみがレンダリングされます。
  6. margin-top、margin-bottom、padding-top、padding-bottomなどのスタイルをヘッダー／フッター要素内で使用すると、ヘッダー／フッターの表示が崩れる可能性があります。
Notes
メモ: ヘッダー／フッター用には、対象HTML要素で次の上下余白属性の使用を検討してください。
  1. zcpage-headerspacing-top='pixelvalue'
  2. zcpage-headerspacing-bottom='pixelvalue'
  3. zcpage-footerspacing-top='pixelvalue'
  4. zcpage-footerspacing-bottom='pixelvalue'

1.3 ページ番号

構文
  1. 現在のページ番号を表示するには、次を追加します。
    <div クラス='zcpage-pagenumber'> <span クラス='currentPageNumber'> </span> </div>
  1. 総ページ数を表示するには、次を追加します。
    <div クラス='zcpage-pagenumber'> <span クラス='totalPageNumber'> </span> </div>
構文の説明
フッターコンテンツが指定されている場合、エクスポートされたページのURL内のzc_PageNumberパラメーターは機能しません。そのような場合は、上記の構文をヘッダーまたはフッターのHTML内に追加することで、ページ番号を表示できます。

たとえば、次のHTMLコードを使用すると、PDFの各ページのフッターに 1 of n、2 of n、…、n of n の形式でページ番号が表示されます。
  1. <div zcpage-footerhtml='true'>
  2. <!-- your footer content -->
  3. <div クラス='zcpage-pagenumber'>
  4. <span クラス='currentPageNumber'> </span> of <span クラス='totalPageNumber'> </span></div>
  5. </div>
Info
Info: 機能別URLを使用してページをPDFとしてエクスポートでき、その際にパラメーターを渡してエクスポートされるページをカスタマイズできます。

2. 注意点

  1. 上記のカスタマイズが複数のHTML要素に指定されている場合、出力PDFはスニペット内で最初に記述されたHTML要素を基準にカスタマイズされます。例:
  1. <div zcpage-spacing='60'> // PDFはこの設定に基づいてカスタマイズされます。
  2. <div zcpage-spacing='40'> // このHTML要素は無視されます。
  1. カスタマイズが複数のHTMLスニペットに記述されている場合、出力PDFはページビルダー上で最初に配置されたHTMLスニペットを基準にカスタマイズされます。
  2. PDFでレンダリングされるのは、無料フォントまたはOpen Font Licenseのフォントのみです。
  3. 一部のMS Coreフォントは、自動的に無料フォントに置き換えられます。
  4. HTMLスニペットを使用してページに画像を挿入する場合、ダッシュボードをエクスポートした際にPDF上で画像が表示されるよう、公開URLを使用してください。
  5. iframeの埋め込みコードを使用してHTMLスニペット内に埋め込んだ外部メディアは、エクスポートされたPDFでは読み込まれない場合があります。
  6. 出力PDFのレイアウト崩れを防ぐため、HTMLスニペット内で入れ子のtableを使用しないでください。
  1. ページについて
  2. ページをPDFとしてエクスポートする

次のステップ
前へ
次のステップ
各種機能について詳しくは、ページのヘルプドキュメントをご覧ください。
前へ
さまざまなデバイス向けにページレイアウトをカスタマイズする方法を参照してください。