экспортировать div, содержащий текст на арабском языке и div-ы старших графиков - PullRequest
Новая
       34

экспортировать div, содержащий текст на арабском языке и div-ы старших графиков

0 голосов
/ 27 января 2019

Я работаю над страницей php, которая включает кнопку экспорта для экспорта div, содержащего арабские текстовые метки, div и div-ы highcharts, моя проблема в том, что jspdf не может экспортировать арабские символы, и использование html2canvas не экспортировало highchartsdivs 

function saveaspdf(){
html2canvas(document.getElementById(\"chart-container\"), {

      onrendered: function(canvas) {


          var imgData = canvas.toDataURL('image/png');


          var imgWidth = 295; 
          var pageHeight = 210;  
          var imgHeight = canvas.height * imgWidth / canvas.width;
          var heightLeft = imgHeight;

          var doc = new jsPDF('l', 'mm');
          var position = 0;

          doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight,'','FAST');

          heightLeft -= pageHeight;

          while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            doc.addPage();
            doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight,'','FAST');
            heightLeft -= pageHeight;
          }
          doc.save('file.pdf');
        }
   });
}

результатом этого кода является PDF-файл без старшей диаграммы, и арабские символы не отображаются должным образом

1 Ответ

0 голосов
/ 28 января 2019

Чтобы создать PDF-файл с диаграммой Highcharts с дополнительным содержимым (с использованием jspdf), вы можете выполнить следующие действия:

  • отправить AJAX на сервер Highcharts с параметрами диаграммы.Возвращаемым будет URL-адрес изображения на сервере.
  • преобразует изображение диаграммы с сервера Highcharts в формат base64.(Вы можете использовать следующие подходы: https://stackoverflow.com/a/20285053/10077925)
  • Добавьте изображение диаграммы и дополнительный контент в pdf с использованием библиотеки jspdf и сохраните результат.

Пример: 

$(function() {

  const toDataURL = url => fetch(url)
    .then(response => response.blob())
    .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onloadend = () => resolve(reader.result)
      reader.onerror = reject
      reader.readAsDataURL(blob)
    }))

  var chartOptions = {

    title: {
      text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
      text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
      title: {
        text: 'Number of Employees'
      }
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle'
    },

    plotOptions: {
      series: {
        label: {
          connectorAllowed: false
        },
        pointStart: 2010
      }
    },

    series: [{
      name: 'Installation',
      data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
      name: 'Manufacturing',
      data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
      name: 'Sales & Distribution',
      data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
      name: 'Project Development',
      data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
      name: 'Other',
      data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

    responsive: {
      rules: [{
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom'
          }
        }
      }]
    }

  };

  var specialElementHandlers = {
    '#editor': function(element, renderer) {
      return true;
    }
  };

  $('#cmd').click(function() {
    var obj = {
        options: JSON.stringify(chartOptions),
        type: 'image/png',
        async: true
      },
      exportUrl = 'https://export.highcharts.com/',
      imgContainer = $("#container"),
      doc = new jsPDF(),
      chartsLen = 1,
      imgUrl;

    var calls = [];

    for (var i = 0; i < chartsLen; i++) {
      calls.push({
        type: 'post',
        url: exportUrl,
        data: obj,
      });
    }

    $.when(
      $.ajax(calls[0])
    ).done(function(c1) {

      imgUrl = exportUrl + c1;

      toDataURL(imgUrl)
        .then(dataUrl => {
          doc.setFontSize(30);
          doc.text(35, 25, 'Your text here...');
          doc.addImage(dataUrl, 'PNG', 15, 40);
          doc.save('sample-file.pdf');
        })
    });
  });

  var chart1 = Highcharts.chart('container', chartOptions);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<button id="cmd">generate PDF</button>

Демо: https://jsfiddle.net/BlackLabel/r58m6h4z/

...