先日 TuesPechkin を使って、ASP.NET MVC 5 のビューを PDF に変換できることを確認した。
ASP.NET MVC 5 でビューを PDF に変換 - present
TuesPechkin は wkhtmltopdf のラッパーで、wkhtmltopdf は JavaScript を使ったページもある程度は PDF に変換できたはず。少なくとも Rails で wicked_pdf を使ったときは変換できた。
試しに、Chart.js でレーダーチャートを Canvas に描画するページを、TuesPechkin で PDF に変換してみる。
ベースは上の記事で作ったサンプル。
まず Chart.js を入手して、Scripts フォルダに配置。
Chart.js | Open source HTML5 Charts for your website
Chart.js はトップページでしか使わないけど、とりあえずバンドルに追加しておく。
using System.Web;
using System.Web.Optimization;
namespace PdfSample
{
public class BundleConfig
{
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*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.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 = {
animation: false
};
var chart = new Chart(document.getElementById("chart").getContext("2d"));
chart.Radar(radarChartData, options);
</script>
}
Web ブラウザで表示するとこんな感じ。
/Home/Pdf にアクセスすると先ほどのページを PDF でダウンロードできる。
ダウンロードした PDF を開いてみると
期待通り、Chart.js で描画したレーダーチャートを PDF に出力できた。