2016-04-02 10 views
0

私はGoogleのチャートチャートを作成するアプリケーションを持っています。 今、電子メールやテレグラムメッセンジャーでチャートのイメージをユーザーに送信したいと考えています。 これはブラウザにイメージチャートを表示し、このイメージをAJAXによってコントローラのアクションに送信するコードです。 このhtmlスクリプトをサーバー上で実行するにはどうすればよいですか?Rails:サーバーサイドでHTMLとJavascriptを実行する

<html> 
<head> 
</head> 
<body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
    google.charts.load("current", {packages:['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 

     data2 = [['Time', 'Temp'],[1456099200,7.4],[1456102800,7.7],[1456106400,8.6],[1456110000,8.6],[1456113600,9.4]] 

     var data = google.visualization.arrayToDataTable(
     data2 
    ); 

     var options = { 
     title: "Darestan Monitoring", 
     legend: 'none', 
     hAxis: { 
      ticks: [{v: 1456099200, f: '1'},{v: 1456102800, f: '2'},{v: 1456106400, f: '3'},{v: 1456110000,f: '4'},{v: 1456113600, f: '5'}] 
     }, 
     annotations: { 
      style: 'line' 
     } 
     }; 

     var chart_div = document.getElementById('chart_div'); 
     var chart = new google.visualization.LineChart(chart_div); 
     // Wait for the chart to finish drawing before calling the getImageURI() method. 
     google.visualization.events.addListener(chart, 'ready', function() { 
     var image_tag = '<img src="' + chart.getImageURI() + '">'; 
     chart_div.innerHTML = image_tag; 
     console.log(chart_div.innerHTML); 
     $.ajax({ 
      url: '/generate_chart/image_data', 
      type: 'POST', 
      data: {"image_data_tag": chart.getImageURI()}, 
      dataType: 'json', 
      beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))} 
     }); 
     }); 
     chart.draw(data, options); 
    } 
    </script> 

<div id='chart_div'></div> 
</body> 
</html> 

答えて

1

wkhtml2imageはまさにあなたが望むものです。

私たちは、多くのPDFkit + wkhtml2pdfをRubyアプリケーション内で使用しています。

私たちのセットアップ:

ActiveJob +エンジェルウォーズ+ PDFKit。 render_to_stringは、HTMLファイルを作成し、PDFKitでwkhtml2pdfに渡すのに役立ちます。 PDFを入手し、ペーパークリップでモデルに保存します。 JavaScriptのを待つことを確認します(wkhtml2image/PDFのオプション)

それはとても簡単なことではないのですが、うまく動作

幸運、

Yacine。

+0

私はImgkitを試しましたが、javascript libが読み込まれませんでした。 –

関連する問題