更改 AmCharts 导出的 PDF 文件中的字体

Question

我在浏览 AmCharts 文档时遇到了一些困难。我似乎遇到的主要问题是在通过导出创建 pdf 文件时查找有关更改默认字体的信息，该导出内置于许可的 AmCharts 版本 3.20.3 中。我希望它是 Open Sans 而不是 Roboto（pdfMake 默认值）。

export : {
                enabled : true,
                drawing : {
                    menu : [{
                        class : 'export-drawing',
                        menu : [{
                            label : translations['ADD'] + ' ...',
                            menu : [{
                                label : translations['PDF_ANNOTATE_SHAPE']  +' ...',
                                action : 'draw.shapes'
                            }, {
                                label : translations['PDF_ANNOTATE_TEXT'],
                                action : 'text'
                            }]
                        }, {
                            label : translations['PDF_ANNOTATE_CHANGE'] + ' ...',
                            menu : [{
                                label : translations['PDF_ANNOTATE_MODE'] + ' ...',
                                action : 'draw.modes'
                            }, {
                                label : translations['PDF_ANNOTATE_COLOR'] + ' ...',
                                action : 'draw.colors'
                            }, {
                                label : translations['PDF_ANNOTATE_SIZE'] + ' ...',
                                action : 'draw.widths'
                            }, {
                                label : translations['PDF_ANNOTATE_OPACITY'] + ' ...',
                                action : 'draw.opacities'
                            }, 'UNDO', 'REDO']
                        }, {
                            label : translations['PDF_EXPORT'],
                            format : 'PDF',
                            fileName : translations['MY_TEAM_PS'],
                            content : [
                                {
                                    image : 'reference',
                                    alignment : 'center',
                                    fit : [769.89, 523.28] // fit image to A4
                                },
                                reportDataTable
                            ],
                            pageOrientation : 'landscape',
                            styles : {
                                tableHeader : {
                                    fontSize : 8,
                                    bold : true
                                },
                                subheader : {
                                    fontSize : 12,
                                    bold : true
                                },
                                tableCell : {
                                    fontSize : 8,
                                    bold : false
                                },
                                quote : {
                                    italics : true
                                },
                                small : {
                                    fontSize : 8
                                }
                            }
                        }, 'CANCEL']
                    }]
                },

他们的文档似乎表明我应该能够在 export 中简单地添加 pdfMake : {} ，然后执行我需要做的事情来更改字体。根据 pdfMake 的文档，我似乎需要按照以下方式做一些事情：

export : {
                pdfMake : {
                    fonts : {
                        OpenSans : {
                            normal : 'OpenSans-Regular.ttf',
                            bold : 'OpenSans-Semibold.ttf',
                            italics : 'OpenSans-Italic.ttf',
                            bolditalics : 'OpenSans-BoldItalic.ttf'
                        }
                    }
                },
                enabled : true,
                drawing : {
                    menu : [{
                        class : 'export-drawing',
                        menu : [{
                            label : translations['ADD'] + ' ...',
                            menu : [{
                                label : translations['PDF_ANNOTATE_SHAPE']  +' ...',
                                action : 'draw.shapes'
                            }, {
                                label : translations['PDF_ANNOTATE_TEXT'],
                                action : 'text'
                            }]
                        }, {
                            label : translations['PDF_ANNOTATE_CHANGE'] + ' ...',
                            menu : [{
                                label : translations['PDF_ANNOTATE_MODE'] + ' ...',
                                action : 'draw.modes'
                            }, {
                                label : translations['PDF_ANNOTATE_COLOR'] + ' ...',
                                action : 'draw.colors'
                            }, {
                                label : translations['PDF_ANNOTATE_SIZE'] + ' ...',
                                action : 'draw.widths'
                            }, {
                                label : translations['PDF_ANNOTATE_OPACITY'] + ' ...',
                                action : 'draw.opacities'
                            }, 'UNDO', 'REDO']
                        }, {... etc}

我的思路是否完全正确？我似乎找不到以前做过这件事的人，这很令人困惑。任何帮助将不胜感激...

Answer 1

您需要创建一个自定义vfs_fonts.js 文件，其中包含您的base64 字体。 pdfMake 的创建者 Bartek 写了一篇简洁的 step-by-step tutorial 如何创建该文件。

创建自定义字体文件后，您需要手动将pdfMake.js 包含到您的HTML 文档中，并在其后面添加您的自定义vfs_fonts.js 文件。然后添加对window.pdfMake.fonts 的引用，否则它使用它的默认字体定义“Roboto”。

<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 = {
        "Open Sans": {
            "normal": 'OpenSans-Regular.ttf',
            "bold": 'OpenSans-Bold.ttf',
            "italics": 'OpenSans-Italic.ttf',
            "bolditalics": 'OpenSans-BoldItalic.ttf'
        }
    }
</script>

您的自定义字体已准备好使用，唯一缺少的是您的导出配置调整，如下所示：

AmCharts.makeChart( {
    "export": {
        "enabled": true,
        "pdfMake": {
            defaultStyle: {
                font: "Open Sans"
            }
        },
    },
    ...
} );

如果您在生成 vfs_fonts.js 文件时遇到问题，我已经为您创建了一个 - download vfs_fonts.js（使用：https://www.google.com/fonts/specimen/Open+Sans）