2

我在浏览 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}

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

4

1 回答 1

3

您需要创建一个自定义vfs_fonts.js文件，其中包含您在 base64 中的字体。pdfMake的创建者 Bartek编写了一个简洁的分步教程如何创建该文件。

创建自定义字体文件后，您需要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我为您创建的文件时遇到问题 -下载 vfs_fonts.js（使用：https ://www.google.com/fonts/specimen/Open+Sans ）

于 2016-04-30T14:50:10.643 回答