Ответ 1
Да, это возможно, но для работы требуется несколько разных библиотек. Первая библиотека jsPDF, которая позволяет создавать PDF файлы в браузере. Второй - canvg, который позволяет визуализировать и анализировать SVG, бит, который действительно крут, хотя он может отображать svg на элемент canvas. Наконец, модуль экспорта Highcharts, который позволит нам отправить 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