我在浏览 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']
}]
},
他们的文档似乎建议我应该简单地在导出内部添加 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}
我的这种想法完全正确吗？我似乎找不到以前做过这件事的人，这很令人困惑。任何帮助将不胜感激...
最佳答案
您需要创建一个自定义 vfs_fonts.js 文件，其中包含 Base64 格式的字体。 Bartek pdfMake 的创造者写得工整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)
关于javascript - 更改 AmCharts 导出的 PDF 文件中的字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36924522/