Tabulator PDF下载中文字体设置

最新推荐文章于 2022-11-20 11:23:11 发布

allway2

最新推荐文章于 2022-11-20 11:23:11 发布

阅读量456

点赞数

文章标签： java php 开发语言

本文链接：https://blog.csdn.net/allway2/article/details/121595810

版权

本文档介绍了如何在使用Tabulator库生成PDF时添加自定义字体。首先，你需要拥有字体的.ttf文件，然后上传到jsPDF字体转换器获取fontName和fontStyle。创建.js文件保存转换后的字体数据，并将其引入到HTML中。最后，在Tabulator的PDF下载配置中设置字体。这个过程适用于每个需要在PDF中使用的自定义字体。

摘要由CSDN通过智能技术生成

Tabulator PDF 下载要求您的站点中包含jsPDF 库和jsPDF-AutoTable 插件，这可以包含在以下脚本标签中。

标准 jsPDF 1.5.3 实现仅支持 14 种标准 PDF 字体。如果您想包含自定义字体以匹配您的品牌或样式指南，那么您将需要采取一些额外的步骤。

如果要使用上述字体之一，则可以使用 setFont() 方法对其进行设置，而无需采取任何其他操作。否则，请按照本教程中的步骤操作。

让我们开始吧！

向 jsPDF 添加自定义字体

要在 PDF 文件中使用自定义字体，您需要所需字体文件的 .ttf 版本。

您购买或下载的大多数字体都可以使用这种格式。例如，当您下载Google Font 时，您将获得下载的每种字体的 .ttf 文件。这是从 Google Fonts下载Lato时的输出：

在文件夹截图中下载的 Lato 字体 ttf 文件

拿到 .ttf 文件后，您需要将要使用的每种字体（一次一个）上传到此jsPDF 字体转换器。你不要需要输入姓名，fontStyle，或模块格式。当您选择 .ttf 字体文件时，这将自动填写。

按“选择文件”按钮并选择您的 .ttf 字体文件。

在jsPDF字体转换器截图中选择“选择文件”

选择 .ttf 文件后，记下出现在 fontName 和 fontStyle 文本框中的文本，然后再按 Create 按钮。此文本是您将在 setFont() 方法中使用的内容，如下所示：

doc.setFont('Lato-Regular', 'normal');

记下 fontName 和 fontStyle 文本后，选择蓝色的“创建”按钮并将 JavaScript 文件保存在安全的地方。您需要将它包含在项目的输出文件夹中并相应地链接到它。

记下 fontName 和 fontStyle jsPDF 字体转换器截图

在生成的js文件仅保留var font = '长字符串'这一行，删除其他行。

在HTML文件中增加对字体JS的引用

设置Tabulator PDF下载字体

document.getElementById("download-pdf").addEventListener("click", function () {
                table.download("pdf", "data.pdf", {
                    orientation: "portrait", //set page orientation to portrait
                    title: "下载报表", //add title to report

                    autoTable: function (doc) {
                        doc.addFileToVFS("font.ttf", font);
                        doc.addFont("font.ttf", "font", "normal");
                        doc.setFont("font");
                        return {
                            styles: {
                                font: "font",
                                fontStyle: "normal"
                            }
                        };
                    }
                });
            });

如果您在 PDF 中使用多种自定义字体，则您需要对每种字体都进行此过程。