将Googlechart导出为PDF，但将内容作为表格或列表获取

我有一个html代码，它应该在点击按钮时生成div的pdf代码中的内容是Googlechart，但将内容作为表或列表获取。 PDF正在生成。但没有图表。将Googlechart导出为PDF，但将内容作为表格或列表获取

<html> 
<head> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="https://parall.ax/parallax/js/jspdf.js"></script> 
    <script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(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 = { 
     bar: {groupWidth: "95%"}, 
     legend: { position: "none" }, 
     }; 
     var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); 
     chart.draw(view, options); 
    } 



    </script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script> 
<script language="javascript" type="text/javascript"> 
    $(document).ready(function(){ 
    var doc = new jsPDF(); 
    var specialElementHandlers = {'#editor': function (element, renderer) { 
     return true; 
     } 
    }; 

    $('#cmd').click(function() { 
     alert("hi"); 

     doc.fromHTML($('#barchart_values').html(), 15, 15, { 
         'width': 170, 
         'elementHandlers': specialElementHandlers 
     }); 
     doc.save('sample-file.pdf'); 
    }); 
    }); 
    </script> 
</head> 
<body> 
<div id="barchart_values" style="width: 900px; height: 500px;border:1px solid red;"></div> 

<div id="editor"></div> 
<button id="cmd">generate PDF</button> 
</body> 
</html>

来源

2015-10-21 JithPS

你的元素与'id'' barchart_values'在哪里？我认为这是问题。 – vijayP

尝试在你的代码中替换这个：'doc.fromHTML（$（'＃content'）。html（），15，15，{'。看看这是否工作。我相信你想用'内容“转换为PDF – vijayP

你有一个赛车条件弄好了，你的文件是不是当你试图retriving值准备，

做到这一点：

$('#cmd').click(function() { 
    alert("hi"); 
     setTimeout(function(){ 

     if($('#barchart_values').length){ 
    doc.fromHTML($('#barchart_values').html(), 15, 15, { 
        'width': 170, 
        'elementHandlers': specialElementHandlers 
    }); 
    doc.save('sample-file.pdf'); 
    } 
    else{alert('no barchar value')} 

}, 500); 
});

此外，请确保您的#barchart_values存在，有它期望的值

使用jspdf将谷歌图表转换为pdf的完整示例， http://www.tothenew.com/blog/generate-pdf-for-google-charts-through-javascript/

来源

2015-10-21 08:54:18

'click'事件被附加到'$（document）.ready'中如何竞争条件会发生？ – vijayP

我试过但没有改变 – JithPS

我没有看到#barchart_values元素，如果它已被动态注入，那么这就是问题 –

将Googlechart导出为PDF，但将内容作为表格或列表获取

回答

相关问题