0

On my website, i have some html tables and some charts from highcharts. And i need to export all using tcpdf.

So i've searched for it and the only things i've founded were about svg. But i don't know how to use it with tcpdf. I thought about exporting each chart as png image and then add these images to the pdf, but i failed. Because each time i export the image it asks me how to save it, but i need to save it automatically.

What are your solutions please ?

Sorry for my english.

4

2 に答える 2

0

画面にいくつかのグラフが表示された、いくつかの数値を報告するかなり単純なページがありました。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();
}
});

このページには、highcharts の 2 つのターゲット div、results_graph_1 と results_graph_2 があり、highcharts はその中に子 div を作成し、その中に svg を作成します。そのため、各ターゲットの最初の子 div の内容に到達することで、svg をコピーして書き出すことができます。サーバー上のファイル。

その後、PDF に挿入する SVG ファイルを取得します。状況はわかりませんが、クリックして PDF をダウンロードする前に、ユーザーが画面上でレポートを表示することを意図しているため、最初の段階でグラフを保存すると、PDF が生成される前に SVG ファイルが準備されます。 .

ダウンロードした phantomjs の実行に関する限り、このスクリプトをそこに test.js として保存し、コマンド プロンプトでそれを抽出した場所 (c:\phantomjs など) に移動して、次のコマンドを実行します。

phantomjs.exe test.js

スクリプトの console.log 部分は、進行状況を通知します。ああ、スクリプトを実行する前に、スクリプトの宛先フォルダーとターゲット Web アドレスを変更してください。

于 2014-05-28T09:26:40.433 に答える
0

多くのTCPD の例があります。画像を pdf にエクスポートできることがわかります。それとも何か特別なものが欲しいですか？

注: ハイチャートから画像をエクスポートする方法を見つけることができます:ここのように

于 2013-03-28T12:00:19.073 に答える