JavascriptでPDF作成

プログラミング

サーバーサイドなら別にjsに限らずともやり方はいくらでもあるけどブラウザオンリーは全く分からんから調査メモ

ブラウザだけで作れる奴ら

  • jsPDF

http://parall.ax/products/jspdf

  • pdfmake

http://pdfmake.org/

  • PDFKit

http://pdfkit.org

https://bytescout.com/products/developer/pdfgeneratorsdkjs/index.html
これだけ商用利用は有償。

playgroundあったりサンプルが豊富なので動かす分には特に困らなかった。
が、日本語を直接扱えないのはわりと困る。

ってことでスクリーンショット取ってそれをぶち込めばいいじゃん？な考えに思いついた。

  • html2canvas

http://html2canvas.hertzen.com

PDF生成のはなんでもいいんですがとりあえずjsPDFと組み合わせてやる。

  • index.html
<!DOCTYPE html>
<html>
    <head>
        <title>PDF generator sample</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
        <script type="text/javascript" src="js/html2canvas.js" ></script>
        <script type="text/javascript" src="js/jspdf.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.addimage.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.from_html.js"></script>
        <script type="text/javascript" src="js/makePDF.js"></script>
    </head>
    <body>
        <button id="go">click</button>
        <iframe id="renderSpace" frameborder="0" width="450" height="450"></iframe>
        <div id="target" style="background-color: white; color: black" >
            あいうえお
            <ul>
                <li>かきくけこ</li>
                <li>さしすせそ</li>
            </ul>
            <p>たちつてと</p>
        </div>
    </body>
</html>
  • makePDF.js
$(function () {
    $("#go").click(function() {
        html2canvas(document.getElementById("target"), {
            onrendered: function (canvas) {
                var dataURI = canvas.toDataURL("image/jpeg");
                var pdf = new jsPDF();
                pdf.addImage(dataURI, 'JPEG', 0, 0);
                var renderString = pdf.output("datauristring");
                $("iframe").attr("src", renderString);
            }
        });        
    });
});

chromeでclick押すとこんな感じ
f:id:ebifly10:20141006004451p:plain

safari
f:id:ebifly10:20141006004544p:plain

FireFoxはなぜか入ってなかったけどまぁいいか。

とりあえず出来たことは出来たんですが、SVG出そうと思ったらアレだったのでどうなんでしょうかね。
エクセル風のグリッドをそのまま出力くらいなら使えそうです。

参考
jsPDFを使ってChart.jsのグラフをPDFに出力してみたけどJPEGがアルファチャンネルに対応してなくて背景黒くなっちゃった - Confront my ignorance