將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，但將內容作爲表格或列表獲取

回答

相關問題