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

时间：2017-04-24 14:25:30

标签： javascript jspdf

CSS代码

@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;
}*/

5 个答案:

答案 0 :(得分：3)

对于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');

用于生成“ yourCustomFontTtfBase64Encoded”的jsPDF-CustomFonts-support库位于此处：https://github.com/sphilee/jsPDF-CustomFonts-support

答案 1 :(得分：1)

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

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');

答案 2 :(得分：1)

这是我正在使用的解决方案。效果很好（有关有效的Codepen，请参见下文）...

首先，正如其他人提到的那样-您将需要以下两个库：

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

下一步-第二个库需要，您必须在名为default_vfs.js的文件中为其提供至少一种自定义字体。我正在使用两种自定义字体-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',
      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()方法中，三个参数是：

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

您可以在这里看到此方法：https://codepen.io/stuehler/pen/pZMdKo

希望这对您和我都一样。

答案 3 :(得分：0)

目前你无法做到。

如果您查看source code，您会看到有一个开关，如果它不知道字体，则返回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');

答案 4 :(得分：0)

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

READ.ME文件中有说明，但让我了解的是这些说明https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041：

  
      
  1. 将.ttf字体上传到Font Squirell https://www.fontsquirrel.com/tools/webfont-generator
    2.   
  2. 按下载，您将获得一个带有新.ttf文件的压缩文件。现在你必须编码到base64 https://www.giftofspeed.com/base64-encoder/。
    3.   
  3. 获得字体的base64代码后，您必须转到使用jsPDF-CustomFonts-support https://github.com/sphilee/jsPDF-CustomFonts-support下载的vfs_fonts.js文件，然后转到其中一个'，'用于分隔您必须添加的文件中的不同字体：“YOUR_FONT_NAME.ttf”：“您的BASE64代码”，（记得在引号后最后用逗号结尾）。
    4.   
  4. 一旦你这样做，你可以添加功能文档。 addFont（ “YOUR_FONT_NAME.ttf”， “YOUR_FONT_NAME.ttf”， “正常”， “WinAnsiEncoding”）。
    5.   
相关问题
最新问题