Wrong encoding of Chinese characters in client side PDF export

[stpoa]

Expected behaviour

After exporting to PDF, chart in PDF should look similar to chart on the screen.

Actual behaviour

After exporting to PDF, chart in PDF has different characters (all Chinese characters displays wrong)

Live demo with steps to reproduce

http://jsfiddle.net/c6oqx5sg/

Original:

In exported PDF:

Affected browser(s)

Chrome, Firefox (checked)

[binarudani]

I have same issue, HighChart using "jspdf" for "localexport", and jspdf not supporting Chinese character,
please provide alternate solution for Local exporting,I need very urgent solution for it..

[TorsteinHonsi]

Thanks for reporting, I have passed this on to svg2pdf to see if they can help.

[sebastianbochan]

+1

Extra demo:

• http://jsfiddle.net/1fq1cpg3/

Workaround:
Set the useHTML flag for the title, but it works only for jpeg/png, not for pdf.

[oysteinmoseng]

PNG/JPEG works for me even without useHTML.

For PDF, here is a workaround to use online export instead. This seems to be the only working option at this time.

[crapthings]

hello it looks both jsPDF and svg2pdf support custom font

https://github.com/MrRio/jsPDF#use-of-utf-8--ttf
https://github.com/yWorks/svg2pdf.js/tree/master#concerning-custom-fonts

but how to pass option to highcharts?

[pawelfus]

Thanks for the heads up! It seems we need to update dependancies in the module, current versions of jsPDF&svg2pdf work fine: http://jsfiddle.net/BlackLabel/7k0vmjef/

How to fix in project:

1. install yWorks/jsPDF (not MrRio/jsPDF !)
2. install yWorks/svg2pdf.js

• change exporting.lubURL to your server paths or:
• alternatively load jsPDF and svg2pdf.js before loading exporting-offline.js module (see demo above for an example)

4. done, try exporting now

[vanlinh30061995]

Thanks for the heads up! It seems we need to update dependancies in the module, current versions of jsPDF&svg2pdf work fine: http://jsfiddle.net/BlackLabel/7k0vmjef/

How to fix in project:

1. install yWorks/jsPDF (not MrRio/jsPDF !)
2. install yWorks/svg2pdf.js

• change exporting.lubURL to your server paths or:
• alternatively load jsPDF and svg2pdf.js before loading exporting-offline.js module (see demo above for an example)

1. done, try exporting now

it work with export png but not work with export pdf

[pawelfus]

Thanks for pointing this out. Which version of jsPDF and svg2pdf did you try in your project? jsPDF v2.0.2 and svg2pdf v1.3.4 seems to be broken now (which is strange). Did you try latest versions of these packages (v2.1 and v1.5)?

[WizardCM]

I can confirm jspdf-yworks 2.1.1 and svg2pdf.js 1.5.0 (the latest versions) do not fix the issue for offline PDFs. This is with Highcharts 8.0.0.

[Jollyfant]

Wow this is a headache! But I got unicode export working by modifying this code in the downloadPDF function in offline-exporting.src.js:

el.style['font-family'] = (
    el.style['font-family'] &&
    el.style['font-family'].split(' ').splice(-1)
);

This part of the code doesn't sit well with the font Lucida Sans Unicode, because of the spaces in the font name maybe? Therefore, I am hardcoding and replacing the font-family with:

el.style['font-family'] = "l_10646";

Where l_10646 is the name of the Lucida Sans Unicode font that was made and loaded with the custom jspdf-yworks fontConverter tool (because default fonts do not support Unicode). This can be done for normal, bold, and italic if needed:

(function (jsPDFAPI) {
    var callAddFont = function () {
        var font = **truncated**
        this.addFileToVFS('l_10646-normal.ttf', font);
        this.addFont('l_10646-normal.ttf', 'l_10646', 'normal');
    };
    jsPDFAPI.events.push(['addFonts', callAddFont])
})(jsPDF.API);

The base64 encoded font variable is truncated for clarity. See the jspdf-yworks repo for details. For the above function call to work you need to load svg2pdf and jspdf manually before loading Highcharts offline exporting like in the example of @pawelfus. I tried renaming the font l_10646 to Lucida Sans Unicode but that doesn't sit well with jsPDF..

Perhaps a consideration is for Highcharts local exporting to include the Lucida Sans Unicode font by default (above snippet)? Otherwise everyone will have this problem since jsPDF does not support Unicode fonts out of the box.