如何让 mPDF 等待我的 JS 完成答案

【问题标题】：How to make mPDF wait for my JS to finish如何让 mPDF 等待我的 JS 完成
【发布时间】：2017-09-26 16:04:04
【问题描述】：

我正在使用 mPDF 和 Highchart。两者都在工作，但有时 PDF 是在图表完成加载之前创建的（图表需要大约 2 秒才能加载）。我想知道是否可以延迟 mPDF 的执行，所以它等待图表。

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'RDBMS',
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  colors: ['#6495ED', '#FFA07A','#9ACD32','#9370DB','#87CEFA'],
  title: {
    text: 'Servidores por RDBMS'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
    enabled: true,
    format: '{point.y} <br> {point.percentage:.1f} %',
    style: {
      color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
    }
      },
      showInLegend: true
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle',
    borderWidth: 0
  },
  series: [{
    name: 'RDBMS',
    colorByPoint: true,
    data: [{
      name: 'Mysql',
      y: 40,        //Dado dinamico
      sliced: true,
      selected: true
    }, {
      name: 'Oracle',
      y: 6, //Dado dinamico
      sliced: true
    }, {
      name: 'SQL Server',
      y: 22,        //Dado dinamico
      sliced: true
    }, {
      name: 'DB2',
      y: 9, //Dado dinamico
      sliced: true
    }, {
      name: 'PostgreSQL',
      y: 1, //Dado dinamico
      sliced: true
    }]
  }]
});

var opts = chart.options;        
opts = $.extend(true, {}, opts); 
delete opts.chart.renderTo;      

var strOpts = JSON.stringify(opts);

$.post(
  'http://export.highcharts.com/',
  {
    content: 'options',
    options: strOpts ,
    type:    'image/jpg',
    width:   '100px',
    scale:   '1',
    constr:  'Chart',
    async:   true
  },
  function(data){
    var imgUrl = 'http://export.highcharts.com/' + data;
    $('#charts').append("<img src='" + data + "' >");
  }
);

这是创建图表的代码。我在页面末尾的表格之后调用此函数。

这就是我的页面的样子printscreen

【问题讨论】：

我认为你应该看看 highchart 事件 - api.highcharts.com/highcharts/chart.events。当图表加载时执行 mpdf。

标签： javascript jquery highcharts mpdf

【解决方案1】：

你需要禁用动画

plotOptions: {
    series: {
        animation: false
    }
}

Link to API doc

【讨论】：

【解决方案2】：

在系列初始动画完成后执行 mPDF。你可以使用afterAnimate 事件来做到这一点。

API 参考：
http://api.highcharts.com/highcharts/plotOptions.series.events.afterAnimate

示例：
http://jsfiddle.net/domfxfhs/

【讨论】：