注意:PDFでは、現在埋め込みスニペットがページのエクスポートアクションに対応していないため、Iframeがロードされない可能性があります。 PDF形式でCreatorページを
ダウンロードすることができます。この
オプションを有効にすると、ユーザーはページ内に表示されているボタンをクリックしてPDFとしてページをダウンロードできます。Creatorは、ページをPDFとしてエクスポートする際に以下のカスタマイズを行うこともできます。
- ページマージンを設定する
- PDF内の各ページでヘッダーとフッターを繰り返す
- ページ番号を表示する
- 画像の可視性を向上する
以下は、ページをPDFとしてエクスポートする際に遵守するべきガイドラインです。これらのガイドラインは、
HTMLスニペット内に組み込むことができます。ページの上部右隅にある
PDFボタンをクリックすると、ダウンロードしたPDFに期待する出力が表示されます。
1. PDFの内容は、すべての側面に0マージンが付与されて表示されます。
2. ページのマージンを設定するには、最初の<div>内でzcpage-spacing='pixelvalue'を使用します。サンプルコードスニペットは以下に示します。
- <body>
- <div zcpage-spacing='40'>
- ...
- </div>
- </body>
3. PDF に表示されるのは、無料のフォント/オープンフォントライセンス付きのフォントのみです。
注意: 一部のMS Coreフォントは、自動的に無料フォントに置き換えられます。
4. ヘッダーコンテンツを繰り返すために、必要なHTML要素にzcpage-headerhtml='true'属性を追加します。
私たちの推奨事項:
- タグ内でzcpage-headerhtml='true' 属性を使用してください。
- テーブル要素や固定位置要素で上記属性を使用しないでください。
5. フッターの繰り返しコンテンツを有効にするには、必要なHTML要素に zcpage-footerhtml='true' を属性として追加してください。
おすすめ:
- <div>タグにzcpage-footerhtml='true' 属性を使用してください。
- テーブル要素や固定位置要素では上記の属性を使用しないでください。
6. ヘッダーおよびフッターのHTML要素の推奨される高さは、300px未満である必要があります。
7. 外部スタイルシートや継承されたスタイルプロパティは、ヘッダーとフッターのHTML要素には適用されません。インラインスタイルを使用することをお勧めします。
8. もしヘッダー/フッター属性が複数のHTML要素に指定されている場合、指定された変更は最初のHTML要素にのみ適用されます。
9. HTML要素にはヘッダーまたはフッターのいずれかを指定できます。両方を指定した場合は、ヘッダーのみがレンダリングされます。
10. HTMLスニペット内でネストされたテーブルの使用は推奨されません。
11. PDFに画像を表示するには、公開URLを使用することをお勧めします。
12. ヘッダー/フッター要素内でmargin-top/margin-bottom/padding-top/padding-bottomなどのスタイル要素を使用すると、ヘッダー/フッター要素が壊れる可能性があります。
以下の値をヘッダー/フッターの上/下のマージンに使用することを検討してください:
- zcpage-headerspacing-top='pixelvalue'
- zcpage-headerspacing-bottom='pixelvalue'
- zcpage-footerspacing-top='pixelvalue'
- zcpage-footerspacing-bottom='pixelvalue'
13. URL内のzc_pagenumberパラメーターは、フッターコンテンツが指定されている場合は機能しません。 このような場合、ヘッダーまたはフッターのHTMLに以下を追加することでページ番号を表示することができます。
- 現在のページ番号を表示するには、<div class='zcpage-pagenumber'> <span class='currentPageNumber'> </span> </div>を追加します。
- 総ページ数を表示するには、<div class='zcpage-pagenumber'> <span class='totalPageNumber'> </span> </div>を追加します。
例えば、以下のHTMLコードを使用すると、PDFの各ページのフッターに1 of n、2 of n、.... n of nが表示されます。
- <div zcpage-footerhtml='true'>
- <!-- フッターコンテンツ -->
- <div class='zcpage-pagenumber'>
- <span class='currentPageNumber'> </span> の <span class='totalPageNumber'> </span></div>
- </div>