Экспорт Highcharts в PDF (с использованием javascript и локального сервера - нет подключения к интернету)

Я использую Highcharts в своем приложении (без подключения к интернету)

У меня есть несколько диаграмм на html-странице, и я хочу создать отчет PDF, который содержит все диаграммы с этой страницы.

Как я могу сделать это без отправки данных на любой сервер в интернете ?

буду благодарен за любую помощь или любой пример можно представить. Заранее спасибо:)

13
highcharts javascript localserver pdf pdf-generation

5 ответов

Да, это возможно, но включает в себя несколько разных библиотек для работы. Первая библиотека 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));

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

30

вам нужно настроить свой собственный сервер экспорта, локально, как в статьи

1

вот пример использования библиотеки :

HTML-код:

<div id="chart_exchange" style="width: 450px; height: 400px; margin: 0 auto"></div>
<button id="export">export</button>
<canvas id="chart_exchange_canvas" width="450" height="400" style="display: none;"></canvas>

javascript:

function drawInlineSVG(svgElement, canvas_id, callback) {
  var can = document.getElementById(canvas_id);
  var ctx = can.getContext('2d');

  var img = new Image();
  img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgElement))));
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
    callback(can.toDataURL("image/png"));
  }
}

полный рабочий код: https://jsfiddle.net/dimitrisscript/f6sbdsps/

1

может быть, эта ссылка может помочь вам.

http://bit.ly/1IYJIyF

попробуйте сослаться на свойства экспорта (fallbackToExportServer: false) и необходимый файл, который должен быть включен (offline-exporting.в JS).

тогда как для экспорта все сразу часть, в настоящее время я сам также все еще пытаюсь. Будет обновляться здесь, если таковые имеются.

0

этот вопрос немного староват, но я недавно работал над собой и имел некоторые проблемы с ним.

я использовал библиотеку jsPDF:https://github.com/MrRio/jsPDF

проблемы, с которыми я столкнулся, jspdf не поддерживает изображение SVG, экспортируемое высокой диаграммой + изображения размыты и низкого качества.

Ниже приведено решение, которое я использовал для получения двух диаграмм в один pdf-документ:

function createPDF() {
var doc = new jsPDF('p', 'pt', 'a4'); //Create pdf

if ($('#chart1').length > 0) {
    var chartSVG = $('#chart1').highcharts().getSVG();
    var chartImg = new Image();

    chartImg.onload = function () {

        var w = 762;
        var h = 600;

        var chartCanvas = document.createElement('canvas');
        chartCanvas.width = w * 2;
        chartCanvas.height = h * 2;
        chartCanvas.style.width = w + 'px';
        chartCanvas.style.height = h + 'px';
        var context = chartCanvas.getContext('2d');
        chartCanvas.webkitImageSmoothingEnabled = true;
        chartCanvas.mozImageSmoothingEnabled = true;
        chartCanvas.imageSmoothingEnabled = true;
        chartCanvas.imageSmoothingQuality = "high";
        context.scale(2, 2);
        chartCanvas.getContext('2d').drawImage(chartImg, 0, 0, 762, 600);

        var chartImgData = chartCanvas.toDataURL("image/png");
        doc.addImage(chartImgData, 'png', 40, 260, 250, 275);

        if ($('#chart2').length > 0) {
            var chart2SVG = $('#chart2').highcharts().getSVG(),
                chart2Img = new Image();

            chart2Img.onload = function () {

                var chart2Canvas = document.createElement('canvas');
                chart2Canvas.width = w * 2;
                chart2Canvas.height = h * 2;
                chart2Canvas.style.width = w + 'px';
                chart2Canvas.style.height = h + 'px';
                var context = chart2Canvas.getContext('2d');
                chart2Canvas.webkitImageSmoothingEnabled = true;
                chart2Canvas.mozImageSmoothingEnabled = true;
                chart2Canvas.imageSmoothingEnabled = true;
                chart2Canvas.imageSmoothingQuality = "high";
                context.scale(2, 2);
                chart2Canvas.getContext('2d').drawImage(chart2Img, 0, 0, 762, 600);

                var chart2ImgData = chart2Canvas.toDataURL("image/png");
                doc.addImage(chart2ImgData, 'PNG', 300, 260, 250, 275);

                doc.save('ChartReport.pdf');
            }

            chart2Img.src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(chart2SVG)));
        }
    }
    chartImg.src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(chartSVG)));
}
}

сценарии для включить:

 <script src="http://code.highcharts.com/highcharts.js"></script>
 <script src="http://code.highcharts.com/modules/exporting.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
0