在jsPdf中添加FontAwesome图标

Question

我正在使用

jspdf.debug.js

最新版本。 网页中使用的

FontAwesome

图标不会在

pdf

中呈现。 我在页面中添加了一个

FontAwesome

用户图标。请参阅图片。（左侧是

HTML

，右侧是

pdf

输出） 下面是我的代码片段。

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addFont('FontAwesome', 'FontAwesome', 'normal');
pdf.setFont('FontAwesome');
pdf.canvas.height = 72 * 11;
pdf.canvas.width = 72 * 8.5;
html2pdf(document.body, pdf, function(pdf){
    var iframe = document.createElement('iframe');
    iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
    document.body.appendChild(iframe);
    iframe.src = pdf.output('datauristring');
});

Answer 1

我就是这样做的，并且所有字体都适用于 Awesome 5...

1. 在这篇文章之后，我在https://peckconsulting.s3.amazonaws.com/fontconverter/fontconverter.html上传了fa-solid-900-normal.ttf

2. 我拿到了js文件并导入它。

3. 在 Angular 中我就是这样做的

    constructor() {
    var callAddFont = function () {
        this.addFileToVFS('fa-solid-900-normal.ttf', jsPDFfonts.fontawesome5_fa_solid_900);
        this.addFont('fa-solid-900-normal.ttf', 'fa-solid-900', 'normal');
    };
    jsPDF.API.events.push(['addFonts', callAddFont])
   

   }

其中

jsPDFfonts.fontawesome5_fa_solid_900

是文件的内容

4. 然后在打印图标的打印过程中我用这种方式做了

        pdf.setFont('fa-solid-900', 'normal');
        pdf.setFontSize(10);
        pdf.text('\uf6f0', 15, 15*index);
   

我直接打印了图标的unicode

Answer 2

jspdf 不支持特殊符号。这是 gitHub 问题。 请参阅此答案中的信息。

Answer 3

这并不能直接回答问题，但如果您使用

pdf.html()

(docs) 方法，这是一个很好的解决方法。这种方法的另一个好处是您不必使用大量图标来扩大 PDF 大小。

您可以将材质图标（或任何其他图标）渲染为图像，并且当通过

pdf.html()

生成时，它将在 PDF 中正确渲染。

方法是将图标渲染为图像，因为

html()

方法可以正确转换图像。

下面是一个简单的例子：

const canvas = document.createElement('canvas');
const ctx = canvas?.getContext('2d');
if (ctx) {
  ctx.font = '24px "Material Icons"';
  ctx.fillText('visibility', 0, 24);
}
const img = new Image();
img.src = canvas?.toDataURL();
const div = document.getElementById('target');
div?.appendChild(img);

<div id="target"></div>

我的 html 中的结果：

我生成的 PDF 中的结果：

我使用的是 Angular，所以我创建了一个指令，使该过程变得非常简单。

import {
  Directive,
  AfterViewInit,
  Renderer2,
  ElementRef,
  Input,
} from '@angular/core';

@Directive({
  standalone: true,
  selector: '[toImage]',
})
export class ToImageDirective implements AfterViewInit {
  @Input() icon = '';
  @Input() size = 24;

  constructor(
    private _el: ElementRef<HTMLElement>,
    private _renderer: Renderer2
  ) {}

  ngAfterViewInit(): void {
    const canvas = this._renderer.createElement('canvas');
    canvas.width = this.size;
    canvas.height = this.size;
    this._el.nativeElement.style.display = 'inline-block';
    this._el.nativeElement.style.width = `${this.size}px`;
    this._el.nativeElement.style.height = `${this.size}px`;
    const ctx = canvas?.getContext('2d');

    if (ctx) {
      ctx.font = `${this.size}px "Material Icons"`;
      ctx.fillText(this.icon, 0, this.size);
    }

    const img = new Image();
    img.src = canvas?.toDataURL();

    this._renderer.appendChild(this._el.nativeElement, img);
  }
}

记住导入模块/独立组件，然后像这样使用它：

<span [icon]="'visibility'" toImage></span>