アプリなどを開発するブログ

React Native / Swift / Ruby on Railsなどの学習メモ。


jsでpdfを生成したいとき

WEBページを閲覧しているユーザーにpdfをダウンロードさせたい時ってありますよね。
PHPが使えてライブラリを自由にインストールできる環境であれば「phpwkhtmltopdf」を使うのが良さそうです。
webkitが解釈したWEBページをpdf化してくれます。

qiita.com

ですが、今回は使用サーバーがレンタルサーバーだしライブラリをインストールできない模様。

(PATHを自分で設定してやってる方もいらっしゃいましたが、諸々の事情で断念。) phpでスクリンーショットをとるのに wkhtmltoimage を使ってみた <サーバーインストール> – 株式会社 NFC

そこでjsのみでpdfを作成することに。

1. pdf生成ライブラリ

pdfmake

jsライブラリ。
jsで内容をobjectで定義するとpdfを作成してくれる。

http://pdfmake.org/

 var docDefinition = {
   content: [
     { text: 'This is a header', style: 'header' },
     'No styling here, this is a standard paragraph',
     { text: 'Another text', style: 'anotherStyle' },
     { text: 'Multiple styles applied', style: [ 'header', 'anotherStyle' ] }
   ],

   styles: {
     header: {
       fontSize: 22,
       bold: true
     },
     anotherStyle: {
       italic: true,
       alignment: 'right'
     }
   }
 };

リストやtableもサポートされている。
styleの定義もある程度可能。
ただし、普通のHTML / CSSと同じ自由度で書けるわけではないので注意が必要。
あくまでも簡単な表などをダウンロードさせるようなものならいいけど、複雑なレイアウトを組もうとするとtableを駆使した苦行になってしまうかも。
また、画像の挿入も可能だが、URLが指定できるわけではないのでbase64エンコードしたものを指定しないといけない。これはやや面倒。
バックエンドでnodejsから使用するなら相対パスで画像を指定できるみたい。

こちらの「playground」ページでコードがリアルタイム反映されるので、色々試してみるといいかも。 http://pdfmake.org/playground.html

f:id:device_me:20161226180138p:plain

2.webサイトのスクショをpdf化

調査中。

参考 qiita.com