对于 jsPdf 版本 1.4.0 和更高版本,可以使用自定义 ttf 字体,如思源字体,标准 jsPDF 1.5.3 实现支持 14 种标准 PDF 字体。14 种标准 PDF 字体如下:
- Courier
- Courier-Bold
- Courier-BoldOblique
- Courier-Oblique
- Helvetica
- Helvetica-Bold
- Helvetica-BoldOblique
- Helvetica-Oblique
- Symbol
- Times-Roman
- Times-Bold
- Time-Italic
- Time-BoldItalic
如果要使用上述字体之一,则可以直接使用 setFont()
方法进行设置,而不需要执行任何其他操作。如果使用自定义字体,则需要使用 base64 编码,并进行相应操作。要在 PDF 文件中使用自定义字体,则需要所需字体文件的.ttf 版本。以下为思源字体,您可以前往 SourceHanSansCN 下载。
在下载.ttf 字体文件后,需要将要使用的字体上传到此 jsPDF Font Converter 进行 Base64 编码,或下载 fontconverter 文件后,本地浏览器打开 fontconverter.html 文件转换。
注意:不要输入 fontName 字段,文件选择后会自动生成 fontName 名称,然后选择 fontStyle,或模块格式,然后点击 Create 按钮下载生成的 js 文件。
以下在设置具体字体时的名称 SourceHanSansCN-Normal
与上面的 fontName 名称一致。
doc.setFont('SourceHanSansCN-Normal', 'normal');
需要注意的是,经过研究,如果选择 SourceHanSansCN-Bold.ttf
字体时,fontStyle 选择 bold,生成的字体 js 在引用后一直不生效,经过研究,发现在 fontStyle 选择 normal 时,即采用
doc.setFont('SourceHanSansCN-Bold', 'normal');
才会生效。个人理解是将 Bold 当成了一个新的 normal 类型的字体而已,即在设置字体时,其名称为 SourceHanSansCN-Bold 的新字体,且其字体类型为 normal
类型。
另外,在 Google 上搜索的话,能够搜索到的大部分内容中均有的代码,但该代码未能直接采用配置模式进行导出设置。
var doc = new jsPDF('landscape');
doc.addFileToVFS('SourceHanSansCN-Normal-normal.ttf','SourceHanSansCN base64编码');
doc.addFont('SourceHanSansCN-Normal-normal.ttf','SourceHanSansCN-Normal','normal');
doc.setFont('SourceHanSansCN-Normal-normal')
采用配置文件方式时,需要先引入字体 js 文件,如下:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/libs/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/libs/jsPDF-AutoTable/jspdf.plugin.autotable.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/zxniuniu/SourceHanSansCN/js/jspdf/SourceHanSansCN-Normal-normal.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/tableExport.min.js"></script>
tableExport
的参数如下:
let conf = {
type: 'pdf',
jspdf: {
orientation: 'landscape', // 'portrait' or 'landscape'
autotable: {
styles: {
font: 'SourceHanSansCN-Normal',
fontStyle: 'normal'
},
headerStyles: {
font: 'SourceHanSansCN-Normal',
fontStyle: 'normal'
},
tableWidth: 'wrap'
}
}
};
$('#pdfstyles').tableExport(conf);
你可以打开 jsPDF 中文字体导出-测试 进行测试,全部演示代码可参见 jsPDF 中文字体导出-源码,以下为导出结果情况。或者参见官方示例 jsPDF Demos。
参见:
JSPDF Custom Font Add not working - Stack Overflow
jsPDF Error – Font does not exist in vFS
How to Use Custom Fonts with jsPDF
Html pdf Chinese export solve the garbage problem in the correct posture
.html method can't handle Chinese correctly, even after used the .setFont method
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于