更改 AmCharts 导出的 PDF 文件中的字体
Changing font in PDF file exported by AmCharts
我在浏览 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}
我的思路是否正确?我似乎找不到以前做过这个的人,这很令人困惑。任何帮助将不胜感激...
您需要创建一个包含您的 base64 字体的自定义 vfs_fonts.js
文件。 Bartek pdfMake wrote a neat 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 (Used: https://www.google.com/fonts/specimen/Open+Sans)
我在浏览 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}
我的思路是否正确?我似乎找不到以前做过这个的人,这很令人困惑。任何帮助将不胜感激...
您需要创建一个包含您的 base64 字体的自定义 vfs_fonts.js
文件。 Bartek pdfMake wrote a neat 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 (Used: https://www.google.com/fonts/specimen/Open+Sans)