highcharts - 导出一个包含阿拉伯文本和 highcharts div 的 div

问题描述

我正在处理一个 php 页面，其中包含一个导出按钮来导出包含阿拉伯文本标签和 div 和 highcharts div 的 div，我的问题是 jspdf 无法导出阿拉伯字符并且使用 html2canvas 没有导出 highcharts div

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');
        }
   });
}

此代码的结果是一个没有 highchart 的 pdf 文件，并且阿拉伯字符没有正确显示

标签： highchartsjspdfarabic-support

要使用带有附加内容的 Highcharts 图表创建 pdf（使用 jspdf），您可以按照以下步骤操作：

使用图表选项将 AJAX 发送到 Highcharts 服务器。返回将是服务器上图像的 URL。
将来自 Highcharts 服务器的图表图像转换为 base64 格式。（您可以使用这些方法：https ://stackoverflow.com/a/20285053/10077925 ）
使用 jspdf 库将图表图像和您的附加内容添加到 pdf 并保存结果。

例子：

$(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/

highcharts - 导出一个包含阿拉伯文本和 highcharts div 的 div

问题描述

解决方案

推荐阅读