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

【问题标题】：How to export c3js to PDF when it loads data from json get request?从 json get 请求加载数据时如何将 c3js 导出为 PDF？
【发布时间】：2018-03-06 07:59:10
【问题描述】：

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

但是当我想使用 Rotativa Plugin 和 wkhtmltopdf 生成此仪表板的 pdf 时，它无法正常工作，它会生成包含数据但不显示图表的 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>
}

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

但是，当我执行打印操作时，它是没有图表的示例。

更新

我也在尝试以不同的方式解决问题，但没有成功：在我绘制图表而不将 ajax 调用到 c3 图表函数中之后，我使用简单的 ajax 请求检索数据并将数据存储在一个变量中。 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>

}

【问题讨论】：

标签： javascript asp.net json pdf c3.js

【解决方案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) 存在某种不兼容。

【讨论】：

我确信问题与第三个建议有关，我正在尝试以另一种方式解决问题。如果您可以建议我遵循任何方法，请查看上面的内容。非常感谢
所以基本上你的 AJAX 调用有问题。检查我在（2）中发布的链接，插件要求服务器允许CORS才能工作，检查这是否是问题的最佳方法是在处理AJAX请求的方法中放置一个断点，看看它是否被调用当您尝试获取 PDF 页面时。

【解决方案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);
    }

结果：

【讨论】：