Question

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="http://cdn.zingchart.com/angular/zingchart-angularjs.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<style>
#chart-1-top > div {
    display: none;
}


</style>
<body ng-app="myApp">
  <div ng-controller="MainController" id="content">
  <input type="hidden" id="value" value="3"> 
    <div zingchart id="chart-11" zc-json="myJson" zc-width="100%" zc-height="568px"></div>
  </div>
  <button id="submit">Export to  PDF</button>
</body>


<script>


var app = angular.module('myApp',['zingchart-angularjs']);

app.controller('MainController', function($scope){
 var a=5;
 var b=4;
 var c=angular.element($('#value')).val();
 var d=16;
 var e=2;
  $scope.myJson = {
      type : 'line',
      series : [
        { values : [a,b,c,d,e] },

      ]
  };
});


</script>
<script>

var doc = new jsPDF(); 
var specialElementHandlers = { 
    '#editor': function (element, renderer) { 
        return true; 
    } 
};
$('#submit').click(function () { 
    doc.fromHTML($('#content').html(), 15, 15, { 
        'width': 190, 
            'elementHandlers': specialElementHandlers 
    }); 
    doc.save('sample-page.pdf'); 
});



</script>

嗨，这是我们尝试使用角度js生成图表的代码。但是当我们点击生成pdf按钮时，图表没有显示在pdf上。 pdf显示为空白而没有图表。我想在pdf上显示图表

Answer 1

我相信fromHTML是异步的，所以请尝试这样做：

doc.fromHTML($('#content').html(), 15, 15, { 
    'width': 190, 
        'elementHandlers': specialElementHandlers 
}, function() {
    doc.save('sample-page.pdf');
});

创建不显示图表的pdf

1 个答案: