javascript-是否可以将自定义Google网络字体与jsPDF一起使用

我正在使用jsPDF(https://parall.ax/products/jspdf,https://github.com/MrRio/jsPDF)在Web应用程序中生成动态PDF.

它运作良好,但我想弄清楚是否有可能在生成的PDF中使用Google网络字体.

我已经找到了许多与此问题相关的链接(包括关于SO的其他问题),但是大多数链接都已过时,并且似乎没有确定的链接,因此我希望有人阐明这是否/如何工作.

到目前为止,这是我尝试过的尝试,但没有成功：

首先,加载字体,并将其缓存为base64编码的字符串：

var arimoBase64;
var request = new XMLHttpRequest()
request.open('GET', './fonts/Arimo-Regular.ttf');
request.responseType = 'blob';
request.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
        arimoBase64 = this.result.split(',')[1];
    }
    reader.readAsDataURL(this.response);
};
request.send()

接下来,创建pdf文档：

doc = new jsPDF({
    orientation: "landscape",
    unit: "pt", 
    format: "letter"
});

doc.addFileToVFS("Arimo-Regular.ttf", arimoBase64);
doc.addFont("Arimo-Regular.ttf", "Arimo Regular", "normal");

doc.setFont("Arimo Regular", "normal");

doc.text("Hello, World!", 100, 100);
doc.save("customFontTest");

保存PDF后-如果在浏览器中查看它-我可以看到自定义字体.但是,如果我使用Adobe Reader或Mac Preview应用查看它,则字体不可见.

我认为这是因为字体是使用浏览器的字体缓存在浏览器中呈现的,但是该字体实际上并未嵌入PDF中,这就是为什么在Adobe Reader中看不到该字体的原因.

所以-有没有办法完成我想做的事情？

解决方法:

好的-我终于弄清楚了,并使其正常工作.万一这对其他人有用-这是我正在使用的解决方案…

首先-您需要两个库：

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

接下来-第二个库要求您在名为default_vfs.js的文件中为其提供至少一种自定义字体.

该文件应如下所示：

(function (jsPDFAPI) { 
    "use strict";
    jsPDFAPI.addFileToVFS("[Your font's name]","[Base64-encoded string of your font]");
})(jsPDF.API);

我正在使用两种自定义字体-Arimo-Regular.ttf和Arimo-Bold.ttf-都来自Google字体.因此,我的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'
    });

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

希望这对您和我都一样有效.

标签：jspdf,javascript
来源： https://codeday.me/bug/20191025/1925378.html