Да, это возможно, но включает несколько разных библиотек для работы. Первая библиотека - jsPDF, которая позволяет создавать PDF-файлы в браузере. Второй - canvg, который позволяет рендеринг и синтаксический анализ SVG, бит, который действительно крут, хотя он может отображать svg на элемент canvas. Наконец, Highcharts export module, который позволит нам отправить SVG в canvg, чтобы превратиться в URL-адрес данных, который затем можно передать jsPDF, чтобы он превратился в ваш pdf-файл.
Вот пример http://fiddle.jshell.net/leighking2/dct9tfvn/ вы также можете увидеть исходные файлы, которые вам необходимо включить в свой проект.
Итак, чтобы начать highcharts, вы можете использовать canvg с его экспортом, чтобы сохранить диаграмму в виде png. потому что вы хотите, чтобы все iamges в PDF это было немного изменено для нашей цели, чтобы просто вернуть URL данных
// create canvas function from highcharts example http://jsfiddle.net/highcharts/PDnmQ/
(function (H) {
H.Chart.prototype.createCanvas = function (divId) {
var svg = this.getSVG(),
width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
canvas = document.createElement('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
if (canvas.getContext && canvas.getContext('2d')) {
canvg(canvas, svg);
return canvas.toDataURL("image/jpeg");
}
else {
alert("Your browser doesn't support this feature, please use a modern browser");
return false;
}
}
}(Highcharts));
Тогда для примера я создал экспорт на кнопку мыши. Это будет искать все элементы определенного класса (поэтому выберите один для добавления ко всем элементам диаграммы), а затем вызовите их функцию highcharts.createCanvas.
$('#export_all').click(function() {
var doc = new jsPDF();
// chart height defined here so each chart can be palced
// in a different position
var chartHeight = 80;
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.setFontSize(40);
doc.text(35, 25, "My Exported Charts");
//loop through each chart
$('.myChart').each(function (index) {
var imageData = $(this).highcharts().createCanvas();
// add image to doc, if you have lots of charts,
// you will need to check if you have gone bigger
// than a page and do doc.addPage() before adding
// another image.
/**
* addImage(imagedata, type, x, y, width, height)
*/
doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
});
//save with name
doc.save('demo.pdf');
});
Важно отметить, что если у вас есть много диаграмм вам нужно будет обрабатывать размещая их на новой странице. Документация для jsPDF выглядит действительно устаревшей (у них действительно хорошая демонстрационная страница, хотя просто не так много объяснять все возможные варианты), есть функция addPage(), и тогда вы можете просто играть с шириной и высотами, пока не найдете что-то, что работает.
Последняя часть предназначена для установки графиков с дополнительной возможностью не отображать кнопку экспорта на каждом графике, который обычно отображается.
//charts
$('#chart1').highcharts({
navigation: {
buttonOptions: {
enabled: false
}
},
//this is just normal highcharts setup form here for two graphs see fiddle for full details
Результат не так уж плохо я впечатлен качеством графики, как я не ожидал многого от этого, с некоторой игрой позиций в формате PDF и размеров может выглядеть очень хорошо.
Вот снимок экрана, показывающий сетевые запросы, сделанные до и после экспорта, когда производится экспорт никаких запросов сделаны http://i.imgur.com/ppML6Gk.jpg
здесь пример того, как выглядит PDF как http://i.imgur.com/6fQxLZf.png (выглядит лучше, когда вид как фактический PDF)
быстрый пример быть судимым на местном https://github.com/leighquince/HighChartLocalExport
Спасибо за вашу помощь, но в этом растворе данные отправляются на сервер экспорта Highcharts. И я не хочу, чтобы это произошло, как я сказал в вопросе :)) – Leon
Нет Я использовал только модуль экспорта, чтобы получить данные SVG, я смотрел вкладку сети и не отправлял никаких данных. – Quince
Преобразование происходит в браузером, поэтому я отключил кнопку экспорта на каждом графике. – Quince