从 json get 请求加载数据时如何将 c3js 导出为 PDF？

Question

我正在为我的一个项目处理仪表板统计信息，我正在使用 C3js 将图表添加到我的仪表板，一切正常，

但是当我想使用 Rotativa 插件和 wkhtmltopdf 生成此仪表板的 pdf 文件时，它无法正常工作，它生成了一个包含数据但不显示图表的 pdf 文件。

只有在我使用 Json 时才会发生这种情况，但是当我直接插入数据时它工作正常。

会议申请：

Server-Side : ASP.Net MVC5

Client-Side :Javascript, Rotativa, C3js

例子

控制器：

 public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Print()
    {
        return new ViewAsPdf("Index");
    }

    public JsonResult Data()
    {
        var d1 = new ArrayList() { "Data1", 1, 4, 7, 8, 10 };
        return Json( d1 , JsonRequestBehavior.AllowGet);
    }
}

观点：

<div id="chart" style="width:500px;height:300px"></div>
 @section scripts{
 <script>
  var chart = c3.generate({
  bindto: '#chart',
  data: {
    url: "http://localhost:58762/Home/Data",
    mimeType: 'json',
    type: 'bar',
}
});
</script>
}

在网页中呈现（索引操作）：

但是，当我执行打印操作时，它只是一片空白，没有图表。

更新

我也在尝试以不同的方式解决问题，但没有成功：我使用简单的 ajax 请求检索数据并将数据存储在变量中，在我绘制图表后没有调用 ajax 到 c3 图表函数中。 html 渲染绝对没问题，但 pdf 打印不工作。下面是我的文件：

<div id="chart" style="width:500px;height:300px">Example 1</div>
@section scripts{
<script> 
    dataT= $.ajax({
        method:'GET',
        url: 'http://localhost:58762/Home/Data',
        context: document.body,
        global: false,
        async: false,
        success: function (result) {
            return result;
        }

    }).responseJSON;
    datad = [
    ['data1', 30, 200, 100, 400, 150, 250],
    ['data2', 130, 100, 140, 200, 150, 50]
    ];
    console.log('Datad: ' + datad);
    console.log('DateT: ' + dataT);
    var chart = c3.generate({
        data: {
            columns: dataT,
            type: 'bar'
            },
            bar: {
                width: {
                ratio: 0.5 
                }
            }
});
</script>

}

Answer 1

可能是以下任何一个：

JavaScript 默认执行超时默认设置为 200，您的数据请求可能需要更长的时间。
您的服务器不支持跨源请求，wkhtmltopdf 运行来自文件系统的 AJAX 请求，所以如果你的服务器没有支持 CORS 那么它只会阻止传入的数据请求。
C3JS 根本无法在 wkhtmltopdf 的渲染引擎中工作

这些是我会尝试的事情：

对于 (1)：查看文档如何增加这个数字
对于 (2)：在 Rotativa GitHub 的页面中查看此问题：https://github.com/webgio/Rotativa/issues/79#issuecomment-75938649
对于 (3)：要调试此问题并确定这一点，只需删除对 c3 的调用并简单打印服务器返回的数据（您必须自己制作 AJAX 可能会打电话）。如果您看到数据，则将调用添加到 C3。如果您没有看到图表，则表示 C3 与渲染引擎 (wkhtmltopdf) 存在某种不兼容。

Answer 2

在尝试了很多解决方案并探索了很多主题之后，我得出的结论是 wkhtmltopdf 无法解析 Ajax 调用 url，所以我改变了思路并传递来自控制器的所有数据，一切都像夏普一样工作。

这是我的解决方案：

视图和脚本：

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

<div id="chart" style="width:500px;height:300px">Lorem  Ipsum</div>

@section scripts{

<script>
var infos = @Html.Raw(Json.Encode(ViewBag.data));
var chart = c3.generate({
data: {
    columns:infos,
        mimeType: 'json',

        type: 'bar'
    },
    bar: {
    width: {
        ratio: 0.5
        }

  }
});


</script>

}

控制器：

  public ActionResult Print()
    {
        var data = Data().Data;
        ViewBag.data = data;
        return new ViewAsPdf("Index");
    }

    public JsonResult Data()
    {
        var d1 = new ArrayList() { "data1", 30, 200, 100, 400, 150, 250 };
        var d2 = new ArrayList() { "data2", 130, 100, 140, 200, 150, 50 };
        var d = new ArrayList() { d1, d2 };
        return Json( d, JsonRequestBehavior.AllowGet);
    }

结果：

从 json get 请求加载数据时如何将 c3js 导出为 PDF？

How to export c3js to PDF when it loads data from json get request?

javascript

pdf

asp.net

json

c3.js