有什么方法可以将 Highcharts 与 mPDF 转换器一起使用？

Question

这个问题与HTMLtoPDF Converter有关。

mPDF 转换器可以与包含的 css 一起正常工作，但不能与任何 Bootstrap Table 或任何 svg 元素一起工作。

如何将 js 包含在 mPDF 的 html 中？

Answer 1

mPDF 不支持 JavaScript。但是，您可以使用以下方法之一：

1. 使用$('svg')[0].outerHTML 之类的方式检索图表的 SVG 代码并将其发送到服务器以作为图像插入到生成的 PDF 中。

2. 使用 Highcharts 导出服务生成可插入 PDF 的图像（SVG 或其他格式）。代码如下：

   var chart = $('.mychart').highcharts();
   var opts = chart.options;        // retrieving current options of the chart
   opts = $.extend(true, {}, opts); // making a copy of the options for further modification
   delete opts.chart.renderTo;      // removing the possible circular reference
   
   /* Here we can modify the options to make the printed chart appear */
   /* different from the screen one                                   */
   
   var strOpts = JSON.stringify(opts);
   
   $.post(
       'http://export.highcharts.com/',
       {
           content: 'options',
           options: strOpts ,
           type:    'image/svg+xml',
           width:   '1000px',
           scale:   '1',
           constr:  'Chart',
           async:   true
       },
       function(data){
           var imgUrl = 'http://export.highcharts.com/' + data;
           /* Here you can send the image url to your server  */
           /* to make a PDF of it.                            */
           /* The url should be valid for at least 30 seconds */
       }
   );
   

   您可以在http://export.highcharts.com/ 上尝试不同的通话选项。另见http://www.highcharts.com/docs/export-module/export-module-overview

请注意，mPDF 不支持某些 SVG 属性，因此您可以考虑将图表导出为光栅图像。