我尝试添加自定义字体到jsPDF。我将我的文件转换为base64并执行以下操作:
doc.addFileToVFS("font/rajdhani-regular-webfont.woff", base64enc);
其中base64enc是以64为基数的编码字符串
然后添加如下字体:
doc.addFont('font/rajdhani-regular-webfont.woff', 'rajdhani', 'normal');
doc.setFont('rajdhani');
但是,我一直收到以下错误
[Error] jsPDF PubSub Error – "No unicode cmap for font" – Error: No unicode cmap for font — jspdf.min.js:9068
Error: No unicode cmap for font — jspdf.min.js:9068registerTTF — jspdf.min.js:9068i — jspdf.min.js:9027:86open — jspdf.min.js:9032(anonymous function) — jspdf.min.js:6031publish — jspdf.min.js:308yt — jspdf.min.js:729:166addFont — jspdf.min.js:1286callme — freport.php:500onclick — freport.php:100
publish (jspdf.min.js:29:5989)
yt (jspdf.min.js:29:18435)
addFont (jspdf.min.js:29:33701)
callme (freport.php:500)
onclick (freport.php:100)
我不知道为什么会这样。
4条答案
按热度按时间2ekbmq321#
我也一直在挣扎,但我终于找到了如何做到这一点!
正如这里提到的,有一个字体转换器由jsPDF贡献者,你可以找到here。
首先在这里上传你的字体,然后输入你的字体名称。它会生成一个JS文件,然后你需要把它包含在你的项目中。如果你愿意,这可以是你的js文件夹。
一旦它在您的文件夹中,将此脚本标记添加到您的index.html(或任何您需要jsPDF的html文件)。
现在您已经将字体自动添加到jsPDF Api文件中,您可以继续从代码中删除下面的两行。
一旦你这样做了,只要检查你从转换器下载的文件,你应该看到在最底部,你的字体名称的第二个参数下面的代码。
复制这个名称,在这个例子中,我们假设它是**"rajdhani"**,所以只需将它放在jsPDF(doc)示例上创建的任何文本之前。
你可以简单地测试它与下面
现在你应该看到一个20px左20px上边距的pdf文件,上面用你的字体写着"这是一个测试"。
希望这有帮助:)
rekjcdws2#
对于ES6模块用户,步骤也非常相似。
如果你像我一样在这里寻找一个关于**离子4角 typescript **的解决方案,下面是对我有效的解决方案!
首先你需要通过npm安装这个包,如下所示。
在此之后,正如我之前的回复中提到的,有一个字体转换器由jsPDF贡献者,你可以在here上找到。使用这个上传你的字体文件并将其包含在你的项目中某个容易在你的TS文件中引用的地方,这样它就可以与ts文件在同一个文件夹中。
现在在您的custom.page.ts中导入以下内容;
一旦你这样做了,只要检查你从转换器下载的文件,你应该看到在最底部,你的字体名称的第二个参数下面的代码。
此.addFont(“字体文件. ttf”,“字体名称”,".......“);
现在,您可以在custom.page.ts中创建一个类似这样的函数;
现在你应该看到一个PDF文件,左边20 px,上边距20 px,用你的字体写着“这是一个测试”:)
可选插件-jsPDF自动表格
如果你想使用jsPDF的autotable插件,请从npm安装以下包。
安装后,将这两个导入添加到您的custom.page.ts中。
如果愿意,您可以创建列和标题的数据
在我们之前创建的exportPDF()函数中添加这些行;
现在你应该得到一个PDF格式的表格里面使用你的字体:)
希望这对某人有帮助。
t9eec4r03#
我遇到了同样的问题,并按照@TuncGerdan解释的步骤操作。我的错误得到了清除,但我在控制台中得到了以下警告。
当我使用doc.getFontList()获取字体列表时,我可以看到列表中包含的自定义字体。
有人能帮忙吗。
db2dz4w84#
我也得到了
Error: No unicode cmap for font
当尝试添加一个新的字体在二进制形式没有他们的转换器,如在文档中提到的。我认为他们的例子中的关键行是这样的:对我来说,不清楚他们对
binary string
的意思。但是,看看他们的转换器,可以清楚地看到binary string
应该是一个base64编码的字符串。所以对于我来说,从远程获取字体并添加它的工作原理是:
对于
util.arrayBufferToBase64
,我使用this Stackoverflow answer中的函数。