2015年11月11日

Javascriptでスクショを撮ってpdfを生成する実験結果


人様から『なんか自分好みのカレンダー作れたらいいよね~』
てことを言われ、少し遊んでみようかといろいろ考えているんですけど……

最終的にカレンダーはpdfで出せたら一番いいよな~と思い、
サーバーに負荷をかけるのもなんかイヤだったので、
Javascriptでクライアント側でpdfを作成することを思いつきまして。

んで、実際にカレンダーを組むのはhtml。
htmlで組んだカレンダーをJavasctiptで画像化し、
その画像でpdfを作って発行するという仕組みを思いつきました。

前提として、これらを利用しますので、
おのおのダウンロードをお願い致しますぃ。

『jsPDF』てのは、その名の通りJavascriptでpdfを生成するためのものです。
『FileSaver』てのは、Javascriptで任意のファイルを保存するためのもので、
『html2canvas』てのは、スクリーンショットを撮るためのものです。

んで、そのテストとして作成したのがこのhtmlたち。
まずはhtmlです。

ほい。つづきまして、javascriptの方です。

こんな感じでやってみました。

んで、実際にそれをブラウザで表示させると、こんな感じ。
諸事情ありまして、ちょっとトリミングしています。

03

ほい。んで、『pdf作成!!』のボタンを押すと、
このままのpdfが作成されるはずなのです。
というわけで、ポチッと押して作成されたpdfのスクショがこちら。
011
ふむ。いい感じです。

ところで、ブラウザでの表示を見ていただけるとわかりますが、
中心に表示されてないですよね。

というわけで、index.htmlの25行目にある、
『margin:auto;』のコメントアウトを解除してみます。
そうしてブラウザに表示されたもののスクショがこちら。
012
うし。中心に表示されました。

この状態でpdfを作成してみます。
出来上がったpdfのスクショがこちらです(`・ω・´)
02
……なんかぼやけてますね(;・∀・) なんででしょ(;・∀・)

まぁ急ぎでもないのでのんびり解決したいなと考えております。

ちなみに、今回作成したコードはこちらからダウンロード出来まっし
もろもろ参考サイトで見たコードそのまま流用させていただきました(;・∀・)

参考サイト

javascriptでPDF出力。jsPDFとかFileSaver.jsとか。

JavaScriptでページをキャプチャ

考えてみたら、Javascriptってあんま本格的に勉強したことなかったなぁ……(;・∀・)

3 thoughts on “Javascriptでスクショを撮ってpdfを生成する実験結果

  1. オオツキ

    こんにちは。
    オオツキと申します。
    こちらのスクリプトとっても便利です。
    使いたいのですが商用利用も可能でしょうか?(まだ提案段階ですが)
    よろしくお願いいたします。

    Reply
    1. 管理人 Post author

      書き込みありがとうございます!
      商用利用に関してですが、俺作のものはご利用いただいて大丈夫です!
      参考ページさまのほうも一度ご確認下さい!

      Reply

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)