如何從json獲取請求加載數據時將c3js導出爲PDF？

我正在dashaboard統計我的項目之一，我使用C3js到圖表添加到我的儀表盤，以及所有它工作正常，如何從json獲取請求加載數據時將c3js導出爲PDF？

，但是當我想這個儀表盤的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>

}

來源

2017-09-25 Ayyoub Dahhane

在嘗試了很多解決方案並探索了很多主題之後，我得出結論：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); 
    }

結果：

來源

2017-09-29 12:08:11

這可能是任何一種：

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）存在某種不兼容性。

來源

2017-09-29 06:41:03 damianmr

我確信問題與第三條建議有關，而我試圖以另一種方式解決問題。請看上面的內容，如果你能告訴我任何關注的方法。非常感謝 –

所以基本上你的AJAX調用有問題。檢查我在（2）中發佈的鏈接，插件需要服務器允許CORS才能工作，檢查這是否是問題的最好方法是在處理AJAX請求的方法中放置一個斷點並查看它是否被調用當您嘗試獲取PDF頁面時。 – damianmr

如何從json獲取請求加載數據時將c3js導出爲PDF？

回答

相關問題