时间戳

首页 > 解决方案 > 如何使用 jsPDF.output() 获取自定义 ttf 字体

javascript - 如何使用 jsPDF.output() 获取自定义 ttf 字体

问题描述

我已将 jsPDF 库添加到我的 Titanium 项目中以生成 PDF 客户端，效果很好。但现在我想为阿拉伯国家本地化应用程序，这意味着我有添加自定义字体。如果您使用 doc.save('file.pdf')，这将非常有效，但对于 doc.output()，它似乎无法正常工作。我必须使用输出，因为我在浏览器之外使用 jsPDF。

为了使该库在 Titanium 中工作，我必须删除对窗口的所有引用，因为它没有在浏览器或 web 视图中运行。

我尝试从不同的来源编写文件，但似乎没有任何结果。

我目前的实现：

doc = new jsPDF();

var f = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'fonts/markazi-text.regular.ttf');
var contents = f.read();
var base64font = Ti.Utils.base64encode(contents).toString();

doc.addFileToVFS("MarkaziText-Regular", base64font);
doc.addFont('MarkaziText-Regular', 'markazi-text', 'normal');

doc.setFontSize(20);

doc.setFont('markazi-text', 'normal');
doc.text('The quick brown fox jumps over the lazy dog', 20, 20);

var tempFile = Ti.Filesystem.getFile(Ti.Filesystem.getTempDirectory(), 'report.pdf');

if (tempFile.exists()) {
  tempFile.deleteFile();
}

tempFile.write(doc.output());

我还尝试从 blob 写入文件：

var reader = new FileReader();
reader.onloadend = function () {
  tempFile.write(reader.result);
};
reader.readAsText(getBlob(buildDocument()));

但是如果我使用它，pdf是空的。我还在钛应用程序的 web 视图中尝试了该库，它确实有效，但我真的不想走那条路。这将需要对代码进行太多更改。

预期的：

1

实际的： 1

标签： javascripttitaniumjspdf

解决方案

我终于通过创建本地 HTML 文件解决了这个问题。在这个 HTML 文件中，我加载了 jsPDF 和我自己的 JavaScript 来生成 PDF 文件。我已经在 WebView 中加载了这个 HTML 文件。

我正在合金控制器中生成 PDF 所需的所有数据。我通过触发应用程序事件并将其捕获到 WebView 中，将这些数据发送到我的 WebView JavaScript。

创建 PDF 后，我在 WebView 中触发一个应用事件，其中包含 jsPDF 文档的 base64 数据：

Ti.App.fireEvent('app:pdfdone', {
  output: doc.output('dataurlstring').replace("data:application/pdf;filename=generated.pdf;base64,", "")
});

我最终将其保存为 Alloy 控制器中的文件：

var f = Ti.Filesystem.getFile(Ti.Filesystem.getTempDirectory(), 'doc.pdf');
f.write(Ti.Utils.base64decode(e.output));

推荐阅读