代码之家 › 专栏 › 技术社区 › mattstuehler

可以在jsPDF中使用自定义Google web字体吗

jspdf javascript

3

mattstuehler · 技术社区 · 8 年前

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

我发现了很多与这个问题相关的链接(包括其他的问题),但是大多数都已经过时了,而且没有什么看起来是确定的,所以我希望有人能澄清这个问题是否有效。

以下是我迄今为止所做的努力,但没有成功:

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 :

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时它不可见的原因。

1 回复 | 直到 8 年前

1

7

mattstuehler 8 年前

好吧-我终于弄明白了,并且开始工作了。如果这对其他人有用的话-这是我正在使用的解决方案。。。

jsPDF格式: https://github.com/MrRio/jsPDF
jsPDF自定义字体支持: 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-都来自谷歌字体。所以,我的 默认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/

它允许您上传一个font.ttf文件,并为您提供可以粘贴到其中的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>

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() 方法,这三个参数是:

addFileToVFS() 在 默认vfs.js
您在中使用的字体名 setFont()
您在中使用的字体样式 setFontType() JavaScript中的函数

https://codepen.io/stuehler/pen/pZMdKo

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

2

1

Tom Mertz 6 年前

我最近遇到了同样的问题,但是看起来jsPDF CustomFonts support repo已经被整合到MrRio的jsPDF存储库中,所以您不再需要它来处理这个问题。

npm install jspdf
创建新文件 fonts/index.js ( mattstuehler's answer )

export const PlexFont = "[BASE64 Encoded String here]";

import jsPDF from 'jspdf';
import { PlexFont } from '../fonts';

// Other Reacty things...

exportPDF = () => {

  const doc = new jsPDF();
  doc.addFileToVFS('IBMPlexSans-Bold.ttf', PlexBold);
  doc.addFont('IBMPlexSans-Bold.ttf', 'PlexBold', 'normal')
  doc.setFont('PlexBold');
  doc.text("Some Text with Google Fonts", 0, 0);

  // Save PDF...
}

// ...