web-dev-qa-db-ja.com

HighchartsをPDFにエクスポート（JavaScriptとローカルサーバーを使用-インターネット接続なし））

アプリケーションでHighchartsを使用しています（インターネット接続なし）

HTMLページに複数のグラフがあり、このページのすべてのグラフを含むPDFレポートを生成します。

インターネット上のサーバーにデータを送信せずにこれを行うにはどうすればよいですか？

私はあなたが提供できるどんな助けやどんな例にも感謝します。前もって感謝します ：）

javascriptpdfhighchartspdf-generationlocalserver
13
Leon

はい、これは可能ですが、機能するにはいくつかの異なるライブラリが必要です。最初のライブラリは jsPDF で、ブラウザでPDFを作成できます。2番目のライブラリは canvg で、 SVGですが、svgをcanvas要素にレンダリングできるという点で本当に優れています。最後に Highcharts export module を使用すると、svgをcanvgに送信して、データURLに変換できます。次に、jsPDFに渡してPDFに変換できます。

次に例を示します http://fiddle.jshell.net/leighking2/dct9tfvn/ プロジェクトに含める必要があるソースファイルも確認できます。

したがって、ハイチャートを開始するには、エクスポートでcanvgを使用してチャートをpngとして保存する例を示します。 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));

次に、例では、ボタンをクリックしてエクスポートを設定しました。これにより、特定のクラスのすべての要素が検索され（1つを選択してすべてのグラフ要素に追加します）、それらの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

31
Quince

ライブラリ pdfmake の使用例を次に示します。

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
Dimitris Siakavelis

article のように、ローカルで独自のエクスポートサーバーをセットアップする必要があります。

1
Sebastian Bochan

この質問は少し古いですが、最近自分で作業していて問題がありました。

私はjsPDFライブラリを使用しました： https://github.com/MrRio/jsPDF

関係のあるjsPDFで発生した問題は、高チャート+ぼやけた低品質の画像によってエクスポートされたSVG画像をサポートしていません。

以下は、2つのチャートを1つの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
Ryan Gavin

多分このリンクはあなたを助けることができます。

http://bit.ly/1IYJIyF

エクスポートプロパティ（fallbackToExportServer：false）と、含める必要がある必要なファイル（offline-exporting.js）を参照してください。

輸出は一気に一部ですが、現在私自身もまだ頑張っています。もしあればここで更新します。

0
William Kheng