javascript jsPDF PubSub错误-“字体没有Unicode cmap”

8hhllhi2  于 2023-02-11  发布在  Java
关注(0)|答案(4)|浏览(653)

我尝试添加自定义字体到jsPDF。我将我的文件转换为base64并执行以下操作:

doc.addFileToVFS("font/rajdhani-regular-webfont.woff", base64enc);

其中base64enc是以64为基数的编码字符串
然后添加如下字体:

doc.addFont('font/rajdhani-regular-webfont.woff', 'rajdhani', 'normal');

doc.setFont('rajdhani');

但是,我一直收到以下错误

[Error] jsPDF PubSub Error – "No unicode cmap for font" – Error: No unicode cmap for font — jspdf.min.js:9068
Error: No unicode cmap for font — jspdf.min.js:9068registerTTF — jspdf.min.js:9068i — jspdf.min.js:9027:86open — jspdf.min.js:9032(anonymous function) — jspdf.min.js:6031publish — jspdf.min.js:308yt — jspdf.min.js:729:166addFont — jspdf.min.js:1286callme — freport.php:500onclick — freport.php:100
    publish (jspdf.min.js:29:5989)
    yt (jspdf.min.js:29:18435)
    addFont (jspdf.min.js:29:33701)
    callme (freport.php:500)
    onclick (freport.php:100)

我不知道为什么会这样。

2ekbmq32

2ekbmq321#

我也一直在挣扎,但我终于找到了如何做到这一点!
正如这里提到的,有一个字体转换器由jsPDF贡献者,你可以找到here
首先在这里上传你的字体,然后输入你的字体名称。它会生成一个JS文件,然后你需要把它包含在你的项目中。如果你愿意,这可以是你的js文件夹。
一旦它在您的文件夹中,将此脚本标记添加到您的index.html(或任何您需要jsPDF的html文件)。

<script src="./fontName.js"></script>

现在您已经将字体自动添加到jsPDF Api文件中,您可以继续从代码中删除下面的两行

doc.addFileToVFS("font/rajdhani-regular-webfont.woff", base64enc);
doc.addFont('font/rajdhani-regular-webfont.woff', 'rajdhani', 'normal');

一旦你这样做了,只要检查你从转换器下载的文件,你应该看到在最底部,你的字体名称的第二个参数下面的代码

this.addFont('fontFile.woff', 'THIS IS FONT NAME' , '.......');

复制这个名称,在这个例子中,我们假设它是**"rajdhani"**,所以只需将它放在jsPDF(doc)示例上创建的任何文本之前。

doc.setFont('rajdhani');

你可以简单地测试它与下面

/* 
"p" for portrait page orientation
"pt" for points. default is mm
"a4" is page size 
*/
var doc = new jsPDF("p","pt","a4"); 
doc.setFont('rajdhani');
doc.text('This is a test', 20,20);
doc.save('filename.pdf');

现在你应该看到一个20px左20px上边距的pdf文件,上面用你的字体写着"这是一个测试"。
希望这有帮助:)

rekjcdws

rekjcdws2#

对于ES6模块用户,步骤也非常相似。
如果你像我一样在这里寻找一个关于**离子4角 typescript **的解决方案,下面是对我有效的解决方案!
首先你需要通过npm安装这个包,如下所示。

npm install jspdf@latest --save

在此之后,正如我之前的回复中提到的,有一个字体转换器由jsPDF贡献者,你可以在here上找到。使用这个上传你的字体文件并将其包含在你的项目中某个容易在你的TS文件中引用的地方,这样它就可以与ts文件在同一个文件夹中。

-fontname-style.js // <<--- Here (This is the file you downloaded from converter)
-custom.page.module.ts
-custom.page.html
-custom.page.scss
-custom.page.spec.ts
-custom.page.ts

现在在您的custom.page.ts中导入以下内容;

import * as jsPDF from 'jspdf';
import './fontname-style.js';

//OPTIONAL (Only import if you want to use autotable)
import 'jspdf-autotable';
import { autoTable as AutoTable } from 'jspdf-autotable';

一旦你这样做了,只要检查你从转换器下载的文件,你应该看到在最底部,你的字体名称的第二个参数下面的代码。
此.addFont(“字体文件. ttf”,“字体名称”,".......“);
现在,您可以在custom.page.ts中创建一个类似这样的函数;

//custom.component.ts or custom.page.ts etc.
exportPDF(){
  var doc = new jsPDF("p","pt","a4"); // You can set your own  paramaters
  doc.setFont('fontName');
  doc.text('This is a test', 20,20); // You can set your own margins
  return doc.save('filename.pdf');
}

现在你应该看到一个PDF文件,左边20 px,上边距20 px,用你的字体写着“这是一个测试”:)

可选插件-jsPDF自动表格

如果你想使用jsPDF的autotable插件,请从npm安装以下包。

npm install jspdf-autotable@latest --save

安装后,将这两个导入添加到您的custom.page.ts中。

import 'jspdf-autotable';
import { autoTable as AutoTable } from 'jspdf-autotable';

如果愿意,您可以创建列和标题的数据
在我们之前创建的exportPDF()函数中添加这些行;

//custom.component.ts or custom.page.ts etc.
exportPDF(){
  var doc = new jsPDF("p","pt","a4");
  doc.setFont('fontName');
  doc.text('This is a test', 20,20); // <-- Remove this line
  ((doc as any).autoTable as AutoTable)({
    head: [['Name', 'Email', 'Country']], // <-- Table headers
    body: [                               // <-- Table body
            ['David', 'david@example.com', 'Sweden'],
            ['Castille', 'castille@example.com', 'Norway'],
            // ...
          ],
    styles: { font: "fontName" } /* <-- This is for the font to work in your 
  table */
  });

  return doc.save('filename.pdf');
}

现在你应该得到一个PDF格式的表格里面使用你的字体:)
希望这对某人有帮助。

t9eec4r0

t9eec4r03#

我遇到了同样的问题,并按照@TuncGerdan解释的步骤操作。我的错误得到了清除,但我在控制台中得到了以下警告。

jspdf.min.js:29 Unable to look up font label for font 'font name', 'normal'. Refer to getFontList() for available fonts.

当我使用doc.getFontList()获取字体列表时,我可以看到列表中包含的自定义字体。
有人能帮忙吗。

db2dz4w8

db2dz4w84#

我也得到了Error: No unicode cmap for font当尝试添加一个新的字体在二进制形式没有他们的转换器,如在文档中提到的。我认为他们的例子中的关键行是这样的:

const myFont = ... // load the *.ttf font file as binary string

对我来说,不清楚他们对binary string的意思。但是,看看他们的转换器,可以清楚地看到binary string应该是一个base64编码的字符串。
所以对于我来说,从远程获取字体并添加它的工作原理是:

/**
 * load a font from remote and add it to jsPDF doc
 * @param path the path of the font, e.g. '/app/fonts/My-Font.ttf'
 * @param doc the jsPDF doc instance to install the font to
 * @return {Promise<void>}
 */
async function loadFont(path, doc) {
    let response = await fetch(path).catch((e) => console.error(e));
    if (!response) {
        return;
    }
    let fontName = path.substring(path.lastIndexOf("/") + 1);
    console.log("using font", fontName);
    let contentBuffer = await response.arrayBuffer();
    let contentString = util.arrayBufferToBase64(contentBuffer)
    if (contentString) {
        doc.addFileToVFS(fontName, contentString);
        doc.addFont(fontName, fontName, "normal");
        doc.setFont(fontName);
    }
}

对于util.arrayBufferToBase64,我使用this Stackoverflow answer中的函数。

相关问题