前端pdf插件JSPDF.JS的简单使用及引入中文字库-CSDN博客

本文链接：https://blog.csdn.net/qq_40051434/article/details/100575518

本文介绍了如何在前端项目中使用JSPDF.js生成PDF，并详细讲解了如何引入中文字库，包括从TTF字体文件转换为JS字体文件的步骤，以及在doc.text中使用自定义字体的注意事项。同时提到了直接引入ttf文件的问题和遇到的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSPDF.JS引入中文字库

引入jspdf.js

github地址：https://github.com/MrRio/jsPDF

在这里插入图片描述
引入在线的库

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>

或直接引入:jsPDF/src/jspdf.js

写个简单的例子

// 创建jspdf对象，默认竖屏，a4纸大小
var doc = new jsPDF();
// 打印所有可用的字体
console.log(doc.getFontList());
// 设置字体（内置的几种字体都是不支持中文，中文字体需要自己添加）
doc.setFont("FZYTK");
// 设置字体大小
doc.setFontSize(20);
// 添加文字内容，左边距离和上边距离
doc.text(path, 55, 180);
// 添加图片（图片转成DataURL形式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQA...）
//左上距离，图片长宽
doc.addImage(images, 'PNG', 55, 55, 100, 100);
// 保存pdf
doc.save(name + '.pdf');

添加中文字库（ttf转js）

需要准备ttf字体文件
TTF字体下载：http://www.font5.com.cn/font_search.php
也可以直接去windows的C盘：C:\Windows\Fonts 中找，不过这里的文件都偏大

然后到**jsPDF/fontconverter/**找jspdf提供的ttf转js工具

打开工具之后如下图所示
在这里插入图片描述
直接选择文件会自动命名，点击create会生成js文件

如上面的例子

doc.setFont("FZYTK");

就可以找到相应的字体并使用了
注意：要放到方法：doc.text 上面否则上面的doc.text设置的字体不生效

直接引入ttf文件（未完成）

官方的demo是

		var doc = new jsPDF({filters: ['ASCIIHexEncode'], putOnlyUsedFonts: true});
        var PTSans;
        if (typeof global === 'object' && global.isNode === true) {
            PTSans = doc.loadFile('/../reference/PTSans.ttf');
        } else {
            PTSans = doc.loadFile('base/spec/reference/PTSans.ttf');
        }
        doc.addFileToVFS("PTSans.ttf", PTSans);
        doc.addFont('PTSans.ttf', 'PTSans', 'normal');
        
        doc.setFont('PTSans'); // set font
        doc.setFontSize(10);
        doc.text("А ну чики брики и в дамки!", 10, 10);
        comparePdf(doc.output(), 'russian-1line.pdf', 'unicode')

这个是我最初使用的方法，遗憾的是我并没有调试通过
直接报错了：jsPDF PubSub Error No unicode cmap for font Error: No unicode cmap for font
最终也没找到出问题原因，希望路过大神可以指导一下

–熬夜是加快脱发的最好方法！
（来着一个做java开发的小渣渣）