Question

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

unwanted_text

他们的文档似乎表明我应该只是在导出内部添加pdfMake：{}然后执行我需要做的更改字体。根据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']
                    }]
                },

我是否在这条思路上走在正确的轨道上？我似乎无法找到任何曾经做过这件事的人，而且这让人非常困惑。任何帮助将不胜感激......

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）

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

1 个答案: