bespoke.js で作ったスライドを PDF で出力するときのコツ

bespoke.js はセットアップも簡単で、かっちょいいスライドをつくれてすっかり気に入ったのですが、

PDF 出力しようとしたときに、ちょっとしたコツが必要でした。

スライド

bespoke-pdf-1

これはデフォルトで作られる内容ですが、うーん、綺麗でかっこいいですね。

さて、印刷から PDF 出力してみるか。

bespoke-pdf-2

やってみるとわかると思いますが、見ていたページしか出てこず、ほかのページが真っ白になってしまいます。

出力してもやはり出てきません。

プリント用 CSS を有効にする

bespoke-pdf-3

Chrome の開発ツールから CSS media の print のエミュレーションを有効にします。

一旦リロードし、最初のページを表示(URL からハッシュを外す)し、印刷プレビューすると…

bespoke-pdf-4

ちゃんとほかのページもプレビューされ、PDF でも出力されました。

印刷用のスタイルは印刷時に適用されるんじゃないんですかね?

わざわざデバッガでエミュレーションしないといけないのが附に落ちませんが…。

出力した PDF です。

もちろんエフェクトやアニメーションは反映されませんが、全ての要素も出力されて、いい仕上がりです。

これで slideshare に投げたり、あとで印刷したりするのに使えますね。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする