Question

我正在一个包含导出按钮的php页面上工作，以导出包含阿拉伯文本标签和div和highcharts div的div，我的问题是jspdf无法导出阿拉伯字符，并且使用html2canvas不能导出highcharts divs

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文件，没有高图，阿拉伯字符未正确显示

Answer 1

要使用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 div的div

1 个答案: