JSPDF 自定义字体添加不起作用

CSS Code

@font-face {
font-family: Calibri;
src: url("fonts/calibri.ttf");
font-style: normal;
}

JS代码

doc.setFont('Calibri');
doc.setFontSize(7.5);
doc.setFontType("normal");
doc.text(10, 10, "Hi, How r u");

我想添加 Calibri 字体，但它不起作用

包含的 js 脚本列表

<script src="/assets/global/scripts/jspdf/jspdf.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/acroform.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/from_html.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addhtml.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/annotations.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/autoprint.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/canvas.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/cell.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/context2d.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/javascript.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/outline.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/prevent_scale_to_fit.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/split_text_to_size.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/standard_fonts_metrics.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/svg.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/total_pages.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/zlib.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png_support.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/filesaver.js" type="text/javascript"></script>

.CSS

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
Created on : Apr 23, 2017, 12:57:52 PM
Author     : common
*/
@font-face {
font-family: Calibri;
src: url("fonts/calibri.ttf");
font-style: normal;
}
/*
@font-face {
font-family: Calibri;
src: url("fonts/calibrii.ttf");
font-style: italic;
}
@font-face {
font-family: Calibri;
src: url("fonts/calibrib.ttf");
font-style: normal;
font-weight: bold;
}
@font-face {
font-family: Calibri;
src: url("fonts/calibriz.ttf");
font-style: italic;
font-weight: bold;
}*/

对于 jsPdf 版本 1.4.0 及更高版本，可以使用自定义字体 (ttf)。自定义字体应采用 base64 编码。不幸的是，并非所有字体都可以使用。

var doc = new jsPDF('landscape');
// to generate 'yourCustomFontTtfBase64Encoded' you can use 
// jsPDF-CustomFonts-support library (on their
// github page there are all instructions for that)
doc.addFileToVFS('yourCustomFont.ttf', 'yourCustomFontTtfBase64Encoded');
doc.addFont('yourCustomFont.ttf', 'yourCustomFont', 'normal');
doc.setFont('yourCustomFont');

jsPDF-CustomFonts-support Library for generate 'yourCustomFontTtfBase64Encoded' 在这里： https://github.com/sphilee/jsPDF-CustomFonts-support

嗨，您可以尝试修改这样的字体，

API.addFont = function(fontScript, font, style) {
addFont(fontScript, font, style, 'StandardEncoding');
};

上面的函数，您必须在字体更改调用之前添加到 lib/，但我建议在加载 JSPDF 后立即添加脚本标签，并在该脚本标签中添加此函数。

现在你需要添加字体css，

然后你可以像这样修改PDF的字体。

doc.addFont('fonts/calibri.ttf', 'Calibri', 'normal');
doc.setFont('Calibri');
doc.text(50,50,'Now this is Calibri');

这是我正在使用的解决方案。效果很好(请参阅下面的工作代码笔)...

首先，正如其他人所提到的 - 您将需要这两个库：

jsPDF： https://github.com/MrRio/jsPDF
jsPDF-CustomFonts-support： https://github.com/sphilee/jsPDF-CustomFonts-support

接下来 - 第二个库要求您在名为default_vfs.js的文件中为其提供至少一种自定义字体。我正在使用两种自定义字体 - Arimo-Regular.ttf和Arimo-Bold.ttf - 都来自Google Fonts。因此，我的default_vfs.js文件如下所示：

(function (jsPDFAPI) { 
"use strict";
jsPDFAPI.addFileToVFS('Arimo-Regular.ttf','[Base64-encoded string of your font]');
jsPDFAPI.addFileToVFS('Arimo-Bold.ttf','[Base64-encoded string of your font]');
})(jsPDF.API);

显然，您的版本看起来会有所不同，具体取决于您使用的字体。

有很多方法可以获取字体的 Base64 编码字符串，但我使用了这个：https://www.giftofspeed.com/base64-encoder/。

它允许您上传字体.ttf文件，并为您提供可以粘贴到default_vfs.js中的 Base64 字符串。

你可以在这里看到实际文件的样子，用我的字体，https://cdn.rawgit.com/stuehler/jsPDF-CustomFonts-support/master/dist/default_vfs.js

因此，一旦您的字体存储在该文件中，您的 HTML 应如下所示：

<script src="js/jspdf.min.js"></script>
<script src="js/jspdf.customfonts.min.js"></script>
<script src="js/default_vfs.js"></script>

最后，你的 JavaScript 代码看起来像这样：

const doc = new jsPDF({
unit: 'pt',
orientation: 'p',
lineHeight: 1.2
});
doc.addFont("Arimo-Regular.ttf", "Arimo", "normal");
doc.addFont("Arimo-Bold.ttf", "Arimo", "bold");
doc.setFont("Arimo");
doc.setFontType("normal");
doc.setFontSize(28);
doc.text("Hello, World!", 100, 100);
doc.setFontType("bold");
doc.text("Hello, BOLD World!", 100, 150);
doc.save("customFonts.pdf");

这对大多数人来说可能是显而易见的，但在addFont()方法中，三个参数是：

您在default_vfs.js文件的addFileToVFS()函数中使用的字体名称
您在 JavaScript 的setFont()函数中使用的字体名称
您在 JavaScript 的setFontType()函数中使用的字体样式

你可以在这里看到这个工作：https://codepen.io/stuehler/pen/pZMdKo

希望这对你和对我一样有效。

你目前不能。

如果你看一下源代码，你会看到有一个开关，如果它不知道字体，则返回times作为字体。

switch (fontName) {
case 'sans-serif':
case 'verdana':
case 'arial':
case 'helvetica':
fontName = 'helvetica';
break;
case 'fixed':
case 'monospace':
case 'terminal':
case 'courier':
fontName = 'courier';
break;
case 'serif':
case 'cursive':
case 'fantasy':
default:
fontName = 'times';
break;
}

您可以使用其中一种字体，也可以编辑库以支持您的字体。

否则，有一个正在进行的库添加了对自定义字体的支持：https://github.com/sphilee/jsPDF-CustomFonts-support

添加所有需要的文件后，您应该像这样使用它：

doc.addFont('fonts/calibri.ttf', 'Calibri', 'Calibri-normal', 'normal');

如上所述，您可以在 https://github.com/sphilee/jsPDF-CustomFonts-support 使用jsPDF-CustomFonts-support库。

有关于读取的说明。ME文件，但让我开始的是这些说明 https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041：

将您的.ttf字体上传到字体松鼠 https://www.fontsquirrel.com/tools/webfont-generator
按下载，您将获得一个带有新.ttf文件的压缩文件。现在您必须编码为 base64 https://www.giftofspeed.com/base64-encoder/。
获得字体的base64代码后，您必须转到使用jsPDF-CustomFonts-support https://github.com/sphilee/jsPDF-CustomFonts-support 下载的vfs_fonts.js文件，并在用于分隔该文件中不同字体的">"，">"之一之后，您必须添加："YOUR_FONT_NAME.ttf"："YOUR BASE64代码"，(请记住在末尾以逗号结尾，在引号之后)。
完成此操作后，您可以添加函数文档.addFont("YOUR_FONT_NAME.ttf"，"YOUR_FONT_NAME.ttf"，"normal"，"WinAnsiEncoding")。

相关内容

最新更新

热门标签：