Экспорт диаграммы Google в лист Excel в Angular

Question

Im используя ng-google-chart для создания диаграмм из данных, которые я получаю из базы данных. Я храню данные в таблице. Мне нужно экспортировать таблицу и диаграмму.

Я использую следующий метод для экспорта таблицы (где «экспортируемые» является DIV класс содержит таблицу):

$scope.export = function() 
{ 

var blob = new Blob([document.getElementById('exportable').innerHTML], { 
       type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" 
      }); 
      saveAs(blob, "Record.xls"); 


      alert("export done"); 
     }; 

я не могу найти способ, чтобы добавить таблицу в этот файл.

Это код для создания блок-схема

var chart1 = {}; 
        chart1.type = "ColumnChart"; 
        chart1.cssStyle = "height:400px; width:500px;"; 
        chart1.data = { 
         "cols": [ 
          { id: "gender", label: "Gender", type: "string" }, 
          { id: "number", label: "number", type: "number" } 

         ], "rows": [ 
          { 
           c: [ 
            { v: "male" }, 
            { v: $scope.male, f: $scope.male } 

           ] 
          }, 

          { 
           c: [ 
            { v: "female" }, 
            { v: $scope.female } 

           ] 
          } 
         ] 
        }; 

        chart1.options = { 
         "title": "", 
         "isStacked": "true", 
         "fill": 20, 
         "displayExactValues": true, 
         "vAxis": { 
          "title": "Number", "gridlines": { "count": 6 } 
         }, 
         "hAxis": { 
          "title": "gender" 
         } 
        }; 

        chart1.formatters = {}; 

        $scope.chart = chart1; 


       } 

Answer 1

К getImageURI графика, ждать ready события и вызвать функцию.
Затем вы можете добавить изображение на страницу.
Вы можете даже скрыть исходную диаграмму, если необходимо ...
Ниже приведен пример загрузки URI изображения в другой элемент.

google.load('visualization', '1', {packages:['corechart'], callback: drawChart}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ["Element", "Density", { role: "style" } ], 
 
    ["Copper", 8.94, "#b87333"], 
 
    ["Silver", 10.49, "silver"], 
 
    ["Gold", 19.30, "gold"], 
 
    ["Platinum", 21.45, "color: #e5e4e2"] 
 
    ]); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, 
 
        { calc: "stringify", 
 
        sourceColumn: 1, 
 
        type: "string", 
 
        role: "annotation" }, 
 
        2]); 
 

 
    var options = { 
 
    title: "Density of Precious Metals, in g/cm^3", 
 
    width: 600, 
 
    height: 400, 
 
    bar: {groupWidth: "95%"}, 
 
    legend: { position: "none" }, 
 
    }; 
 
    var chart = new google.visualization.ColumnChart(document.getElementById("chart_div")); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     document.getElementById("chart_image").insertAdjacentHTML('beforeEnd', '<img alt="Chart Image" src="' + chart.getImageURI() + '">'); 
 
    }); 
 

 
    chart.draw(view, options); 
 
}

<script src="https://www.google.com/jsapi"></script> 
 
<span>CHART</span> 
 
<div id="chart_div"></div> 
 
<br/> 
 
<span>IMAGE</span> 
 
<div id="chart_image"></div>