Question

我在其中一个项目上处理dashaboard统计信息，并且我使用C3js将图表添加到我的信息中心，并且一切正常，

但是当我想使用Rotativa Plugin和wkhtmltopdf生成此仪表板的pdf时，但它不能正常工作，它会生成带有数据但不显示图表的pdf。

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

加密应用

服务器端：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>
}

在网页中渲染（索引操作）：

但是，当我执行“打印”操作时，它没有图表就显得空白。

更新

我也尝试以不同的方式解决问题，但没有成功：我使用简单的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）：检查文档中如何增加此数字
For（2）：在Rotativa GitHub的页面中查看此问题：https://github.com/webgio/Rotativa/issues/79#issuecomment-75938649
对于（3）：调试此问题并确保这一点，只需删除对c3的调用并对服务器返回的数据进行简单打印（您可能需要自己进行AJAX调用）。如果您看到数据，则将调用添加到C3。如果您没有看到图表，则表示C3与渲染引擎（wkhtmltopdf）存在某种不兼容性。

Answer 2

在尝试了很多解决方案并探索了很多主题后，我得出的结论是wkhtmltopdf无法解析Ajax调用URL，所以我改变了我的思维方式并传递了来自控制器的所有数据，并且全部它就像锐化一样。

这是我的解决方案：

查看＆amp;脚本：

@{
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？

2 个答案: