3

This question is related to HTMLtoPDF Converter.

The mPDF converter is working all fine with the included css, but not with any Bootstrap Table or any svg elements.

How to include the js in html for mPDF?

1 Answer 1

5

mPDF doesn't support JavaScript. You can, however, use one of the following approaches:

  1. Retrieve SVG code of the chart using something like $('svg')[0].outerHTML and send it to the server to insert into the generated PDF as an image.

  2. Use Highcharts export service to generate an image (SVG or other format) which can be inserted into the PDF. The code is along the following lines:

    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 */
        }
    );
    

    You can experiment with different call options on http://export.highcharts.com/. See also http://www.highcharts.com/docs/export-module/export-module-overview

Note that mPDF doesn't support some SVG properties, so you may consider exporting your chart as a raster image.

2
  • Hi I am really trying to achieve the same thing as the OP and your response is the best option I have, but I can't make sense of it. Would you be able to answer a couple fo questions about it? - Where does the code (in 2) sit? what is .mychart the id of the chart I'm building? should it be #mychart?
    – Gideon
    Nov 18, 2014 at 4:46
  • Hi @Gideon! I hope my answer isn't too late. $('.mychart') refers to a div with class mychart, inside which the chart is created. In your case it may be #mychart or any other selector uniquely identifying the container of the chart. This JS code may sit on the page or in an included JS file. The idea is to generate an image from the chart with help of Highcharts server, and then send it to your server where mPDF will make a PDF file out of it. Dec 2, 2014 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.