Highcharts出口多個圖表與TCPDF

Question

到PDF在我的網站，我有一些HTML表格和highcharts一些圖表。 而我需要導出所有使用tcpdf。

所以我尋找它，我已經建立的唯一的東西是關於SVG。但我不知道如何使用tcpdf。 我想過將每個圖表導出爲PNG圖像，然後將這些圖像添加到PDF，但我失敗了。因爲每次我輸出圖像，它都會問我如何保存圖像，但我需要自動保存圖像。

請問您有什麼解決方案？

對不起，我的英語。

Answer 1

有很多的TCPD examples - 那裏你可以看到，它是可能的圖像導出爲PDF格式。或者你想要特別的東西？

注意：你能找到一種方法如何圖片來自highcharts出口：like here

Answer 2

我有一個非常簡單的頁面報告一些數字與一對夫婦在屏幕上的圖形。我想作爲TCPDF支持SVG和圖表在SVG產生，那將是最好的格式在捕捉它們，令人驚訝的我找不到太多關於這樣做，所以這裏是我的腳本爲phantomjs一個通用版本：

var dest_folder = 'C:\\myfolder\\subfolder\\'; 
console.log('Destination Folder: ' + dest_folder); 

var page = require('webpage').create(); 
page.open('http://www.example.com/graphs_page/', function(status) { 
if (status !== 'success') { 
    console.log('Unable to load the address!'); 
    phantom.exit(); 
} else { 
    console.log('Loaded Page'); 

    // Get the first graph 
    graph_1_svg = page.evaluate(function() { 
      return document.getElementById('results_graph_1').children[0].innerHTML; 
    }); 
    console.log('graph_1_svg: ' + graph_1_svg.length + ' chars long'); 
    // Write to destination folder or report error to console 
    var fs = require('fs'); 
    try { 
     fs.write(dest_folder + 'graph_1.svg', graph_1_svg, 'w'); 
    } catch(e) { 
     console.log(e); 
    } 

    // Get the second graph 
    graph_2_svg = page.evaluate(function() { 
      return document.getElementById('results_graph_2').children[0].innerHTML; 
    }); 
    console.log('graph_2_svg: ' + graph_2_svg.length + ' chars long'); 
    // Write to destination folder or report error to console 
    var fs = require('fs'); 
    try { 
     fs.write(dest_folder + 'graph_2.svg', graph_2_svg, 'w'); 
    } catch(e) { 
     console.log(e); 
    } 

    phantom.exit(); 
} 
}); 

該頁面包含兩個目標div，分別爲highcharts，results_graph_1和results_graph_2，highcharts創建一個子div，然後創建其中的svg，因此通過接觸每個目標的第一個子div的內容，我們可以複製svg和將它寫出到服務器上的文件中。

之後拿起SVG文件把你的PDF。我不確定你的情況是什麼，但我打算用戶在點擊下載PDF之前在屏幕上查看報告，因此我將在第一階段保存圖表，並在生成PDF之前準備好SVG文件。

至於運行phantomjs去，如果你下載它，保存這個腳本在那裏test.js，然後在命令提示符下轉到您提取它，例如c：\ phantomjs並運行：

phantomjs.exe test.js 

腳本的console.log部分將通知您其進度。哦，並在運行之前在腳本中更改目標文件夾&目標網址。