如何使用 jsPDF.output() 获得自定义 ttf 字体
How to get custom ttf font working with jsPDF.output()
我已将 jsPDF 库添加到我的 Titanium 项目中以生成 PDF 客户端,效果很好。但现在我想针对阿拉伯国家/地区本地化应用程序,这意味着我可以添加自定义字体。如果您使用 doc.save('file.pdf'),这将完美地工作,但对于 doc.output() 似乎无法正常工作。我必须使用输出,因为我在浏览器之外使用 jsPDF。
为了使库在 Titanium 中工作,我不得不删除对 window 的所有引用,因为它不是 运行 在浏览器或网络视图中。
我试过从不同来源写入文件,但似乎没有任何结果。
我当前的实现:
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是空的。我还在钛应用程序的网络视图中尝试了该库,它确实有效,但我真的不想走那条路。这将需要对代码进行太多更改。
预计:
实际:
我终于通过创建本地 HTML 文件解决了这个问题。在这个 HTML 文件中,我加载了 jsPDF 和我自己的 JavaScript 以生成 PDF 文件。我已经在 WebView 中加载了这个 HTML 文件。
我正在 Alloy 控制器中生成 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));
我已将 jsPDF 库添加到我的 Titanium 项目中以生成 PDF 客户端,效果很好。但现在我想针对阿拉伯国家/地区本地化应用程序,这意味着我可以添加自定义字体。如果您使用 doc.save('file.pdf'),这将完美地工作,但对于 doc.output() 似乎无法正常工作。我必须使用输出,因为我在浏览器之外使用 jsPDF。
为了使库在 Titanium 中工作,我不得不删除对 window 的所有引用,因为它不是 运行 在浏览器或网络视图中。
我试过从不同来源写入文件,但似乎没有任何结果。
我当前的实现:
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是空的。我还在钛应用程序的网络视图中尝试了该库,它确实有效,但我真的不想走那条路。这将需要对代码进行太多更改。
预计:
实际:
我终于通过创建本地 HTML 文件解决了这个问题。在这个 HTML 文件中,我加载了 jsPDF 和我自己的 JavaScript 以生成 PDF 文件。我已经在 WebView 中加载了这个 HTML 文件。
我正在 Alloy 控制器中生成 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));