Amcharts中的乱码导出为PDF

Question

I try to use Javascript to export the amcharts to PDF by following this website's

[Codepen](https://codepen.io/team/amcharts/pen/35076c4d7b6eef7764dacc61f72adadc)

steps, but the PDF has garbled text(Chinese words), I want to use UTF-8, how can I fix it? And why the chart's degree of resolution is so low? Thanks. enter image description here

html

<h2 id="OPASS" class="display-5 col-md-offset-4 col-md-12">測試圖表</h2>

javascript

    var downloadPDF = function() {
            console.log("Starting export...");
            var ids = ["chartdiv", "Passion_chart", "Anchor_chart", "Switch_chart", "Synergy_chart"];
            var charts = {}, charts_remaining = ids.length;
            for (var i = 0; i < ids.length; i++) {
                for (var x = 0; x < AmCharts.charts.length; x++) {
                    if (AmCharts.charts[x].div.id == ids[i])
                        charts[ids[i]] = AmCharts.charts[x];
                }
            }
            for (var x in charts) {
                if (charts.hasOwnProperty(x)) {
                    var chart = charts[x];
                    chart["export"].capture({}, function() {
                        this.toJPG({}, function(data) {
                            // Save chart data into chart object itself
                            this.setup.chart.exportedImage = data;
                            // Reduce the remaining counter
                            charts_remaining--;
                            // Check if we got all of the charts
                            if (charts_remaining == 0) {
                                // Yup, we got all of them
                                // Let's proceed to putting PDF together
                                generatePDF();
                            }
                        });
                    });
                }
            }
            function generatePDF() {
                // Log
                console.log("Generating PDF...");
                // Initiliaze a PDF layout
                var layout = {
                    "content": []
                };
                // Let's add a custom title
                layout.content.push({
                    "text": document.getElementById("OPASS").innerHTML,
                    "fontSize": 24
                });
                // Now let's grab actual content from our <p> intro tag
                layout.content.push({
                    "text": document.getElementById("intro").innerHTML
                });
                // Add bigger chart
                layout.content.push({
                    "image": charts["chartdiv"].exportedImage,
                    "fit": [523, 300]
                });
                chart["export"].toPDF(layout, function(data) {
                this.download(data, "application/pdf","amCharts.pdf");
            });
        }
    }

Answer 1

PDFMake, the library AmCharts leverages for PDF export, does not support Chinese out of the box with the default Roboto font it's using (there are tons of issues about this in the issue tracker, such as this one ). You have to create a custom vfs_fonts.js file with a font that has Chinese characters and use that instead of the bundled font file using the step by step tutorial provided by the pdfmake devs. "Microsoft YaHei" seems to be recommended going by the github issues I looked at.

Once you've created your custom font file, you need to manually include pdfMake.js into your page, as well as your custom vfs_fonts.js file, then a reference to window.pdfMake.fonts otherwise it knows to use that instead of the default Roboto font.

<script src="./amcharts/plugins/export/libs/pdfMake/pdfMake.js" type="text/javascript"></script>
<script src="vfs_fonts.js" type="text/javascript"></script>
<script type="text/javascript">
    pdfMake.fonts = {
        "Microsoft Yahei": {
            "normal": 'name of font.tff', //replace with the name of the ttf font file
            "bold": 'name of bold font.ttf',
            "italics": 'name of italics font.ttf',
            "bolditalics": 'name of bold italics font.ttf'
        }
    }
    // ...

AmCharts.makeChart( {
    "export": {
        "enabled": true,
        "pdfMake": {
            defaultStyle: {
                font: "Microsoft YaHei"
            }
        },
    },
    ...
} );
</script>