【Visualforce】PDF表示でstyleタグに書いたCSSが効かない
ナタリー公式ヘルプページを参考にVisualforceでPDF帳票を作っていた時、styleタグに書いたCSSが効かないという事象にだいぶハマったことがありました。
そのことをスッカリ忘れてまたハマってしまったので、備忘として書き留めたいと思います。
事象
事象としては下記のようなものになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!-- Visualforceページ（PDF） --> <apex:page controller="SampleController" renderAs="pdf" showHeader="false"> <html> <head> <style> body { font-family: 'Arial Unicode MS'; font-size: 40px; } .test_style { font-family: 'Arial Unicode MS'; font-size: 40px; } </style> </head> <body> AAA <div class="test_style">BBB</div> <div style="font-family:'Arial Unicode MS'; font-size:40px;">CCC</div> </body> </html> </apex:page> |
これを表示した結果がこれです↓
どうもインラインに書いたスタイルしか効いていません。
これをPDFではなく通常のVFページで表示するとちゃんとスタイルが効いているので、PDFで表示した時の問題だと分かります。
回避策
apex:pageタグのapplyHtmlTag属性にfalseを設定するとスタイルが効くようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!-- Visualforceページ（PDF） --> <apex:page controller="SampleController" renderAs="pdf" showHeader="false" applyHtmlTag="false"> <html> <head> <style> body { font-family: 'Arial Unicode MS'; font-size: 40px; } .test_style { font-family: 'Arial Unicode MS'; font-size: 40px; } </style> </head> <body> AAA <div class="test_style">BBB</div> <div style="font-family:'Arial Unicode MS'; font-size:40px;">CCC</div> </body> </html> </apex:page> |
なぜこうなるのか、理屈はよく分かっていません・・
開発者ガイドのapplyHtmlTag属性の説明には
| 生成される HTML 出力に、<html> タグを Visualforce で自動的に追加するかどうかを指定する boolean 値。たとえば、<html> タグをマークアップで静的に設定する場合などのように、応答への <html> タグの追加を無効にするには、false に設定します。指定されていない場合、この値はデフォルトの true に設定されます。 |
とあり、Visualforceで自動生成したタグと自前で書いたタグが、悪いぐあいに干渉してこういう事象になってしまうのかなと認識しています。
補足
では自前で書いた<html>タグを省略したらどうなるかというと、やはりapplyHtmlTag属性にfalseを設定しないと同じ事象になります。
ただ、<html>タグを省略した場合にはapplyBodyTag属性をfalseに設定することで事象が回避されます。
とりあえずVisualforceでPDF帳票を作成する際に<head>や<body>を自前で書く場合は、上記の属性はfalseに設定しておくと良いと思われます。
