ASP.NET MVC 5 で JavaScript を使ったページを PDF に変換する

先日 TuesPechkin を使って、ASP.NET MVC 5 のビューを PDF に変換できることを確認した。

<a href="http://tnakamura.hatenablog.com/entry/2015/02/18/tuespechkin">ASP.NET MVC 5 でビューを PDF に変換 - present</a>

TuesPechkin は wkhtmltopdf のラッパーで、wkhtmltopdf は JavaScript を使ったページもある程度は PDF に変換できたはず。少なくとも Rails で wicked_pdf を使ったときは変換できた。

試しに、Chart.js でレーダーチャートを Canvas に描画するページを、TuesPechkin で PDF に変換してみる。ベースは上の記事で作ったサンプル。

まず Chart.js を入手して、Scripts フォルダに配置。

<a href="http://www.chartjs.org/">Chart.js | Open source HTML5 Charts for your website</a>

Chart.js | Open source HTML5 Charts for your website

Chart.js はトップページでしか使わないけど、とりあえずバンドルに追加しておく。

using System.Web;
using System.Web.Optimization;

namespace PdfSample
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            // Chart.js を追加
            bundles.Add(new ScriptBundle("~/bundles/chart").Include(
                "~/Scripts/Chart.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

コントローラーに修正は不要。レーダーチャートを描画する JavaScript コードをビューに追加する。

@{
    ViewBag.Title = "Home Page";
}

<h1>Chart.js テスト</h1>

<canvas id="chart" width="400" height="400"></canvas>

@section Scripts {
    @Scripts.Render("~/bundles/chart")

    <script type="text/javascript">
        var radarChartData = {
            labels: ["ミート", "パワー", "走力", "肩力", "守備力"],
            datasets: [
                {
                    label: "サンプル",
                    fillColor: "rgba(151, 187, 205, 0.2)",
                    strokeColor: "rgba(151, 187, 205, 1)",
                    pointColor: "rgba(151, 187, 205, 1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(151, 187, 205, 1)",
                    data: [100, 80, 70, 80, 90]
                }
            ]
        };
        var options = {
            // アニメーションを無効にしておかないと
            // PDF にしたときチャートが途中の状態で変換されてしまう
            animation: false
        };
        var chart = new Chart(document.getElementById("chart").getContext("2d"));
        chart.Radar(radarChartData, options);
    </script>
}