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

Question

我正在dashaboard统计我的项目之一，我使用C3js到图表添加到我的仪表盘，以及所有它工作正常，

，但是当我想这个仪表盘的PDF文件使用产生Rotativa插件和wkhtmltopdf，但它不能正常工作，它会生成一个包含数据但没有显示图表的pdf。

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

CONF应用：

服务器端：ASP.Net MVC5

客户端：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> 
} 

渲染网页（index动作）：

但是，当我执行打印操作，这是samply空白无图。

更新

我也想解决这个问题以不同的方式，但没有成功： 我用一个简单的Ajax请求retreive数据，并将数据存储在一个变量，之后我画图表，而不调用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

在尝试了很多解决方案并探索了很多主题之后，我得出结论：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); 
    } 

结果：

Answer 2

这可能是任何一种：

1. JavaScript的默认执行超时默认设置为200，你的 请求数据可能需要更长的时间。

2. 您的服务器不支持跨起源请求，wkhtmltopdf运行 从文件系统中的AJAX请求，因此，如果您的服务器不支持 CORS那么它只会阻止对数据的传入的请求。

3. C3JS根本不wkhtmltopdf的渲染引擎工作

这些是我想尝试的东西：

• 对于（1）：检查文档中如何增加对于（2）：在Rotativa GitHub的页面检查此问题：https://github.com/webgio/Rotativa/issues/79#issuecomment-75938649
• 对于（3）：调试此问题并确保这只需要移除对c3的调用并对服务器返回的数据进行简单打印（您可能必须自己创建AJAX调用）。如果您看到数据，则将呼叫添加到C3。如果您没有看到图表，那么这意味着C3与渲染引擎（wkhtmltopdf）存在某种不兼容性。