Highcharts экспортирует несколько диаграмм в pdf с tcpdf

Question

На моем веб-сайте у меня есть некоторые html-таблицы и некоторые диаграммы из высоких диаграмм. И мне нужно экспортировать все, используя 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(); 
} 
}); 

На странице представлены два целевых divs для highcharts, results_graph_1 и results_graph_2, а highcharts - дочерний div внутри, затем svg внутри этого, поэтому, дойдя до содержимого первого дочернего div каждой цели, мы можем скопировать svg и запишите его в файл на сервере.

После этого возьмите файлы SVG, чтобы положить их в свой PDF-файл. Я не уверен, какова ваша ситуация, но я хочу, чтобы пользователи просматривали отчет на экране перед тем, как щелкнуть, чтобы загрузить PDF-файл, поэтому у меня будет первый этап сохранения графиков, и файлы SVG будут готовы до того, как будет создан PDF-файл ,

Насколько работает phantomjs идет, если вы загрузите его, сохраните этот скрипт в там test.js, то в командной строке перейти туда, где вы распаковали его, скажем, c: \ phantomjs и запуск:

phantomjs.exe test.js 

Консольные части скрипта сообщают вам о его прогрессе. Ох и измените папку назначения & целевого веб-адреса в скрипте перед его запуском.