Base64 是一种将二进制数据转换为 ASCII 字符串的编码方式,常用于在文本环境中传输二进制数据。对于字体文件,将其转换为 Base64 编码后,可以直接嵌入到 JavaScript 代码中,以便在生成 PDF 时使用。
如何获取字体的实际 Base64 数据
选择字体:首先选择你需要使用的字体文件,比如
NotoSansCJK-Regular.ttf
。转换为 Base64:可以使用在线工具或命令行工具将
.ttf
文件转换为 Base64。例如,可以使用下面的命令行工具:
base64 NotoSansCJK-Regular.ttf > font_base64.txt
- 复制输出:打开
font_base64.txt
文件,复制里面的内容,就是你的实际 Base64 数据。
实际示例
假设我们有一个名为 NotoSansCJK-Regular.ttf
的字体文件,它经过转换后的 Base64 编码如下(注意:这只是一个简化版本,真实的 Base64 数据会很长):
data:font/truetype;base64,AAEAAAASAQAABAAwRzZ4dQ...
在代码中的应用
以下是如何在 jsPDF 中使用这个实际的 Base64 数据:
import { jsPDF } from 'jspdf';
const fontBase64 = "AAEAAAASAQAABAAwRzZ4dQ..."; // 用真实的Base64字符串替换这里
const generatePDF = () => {
const pdf = new jsPDF();
// 添加自定义字体
pdf.addFileToVFS("NotoSansCJK-Regular.ttf", fontBase64);
pdf.addFont("NotoSansCJK-Regular.ttf", "NotoSansCJK", "normal");
// 设置使用自定义字体
pdf.setFont("NotoSansCJK");
// 添加中文文本
pdf.text("这是我的 ECharts 图表", 10, 10);
// 保存 PDF
pdf.save("example.pdf");
};
注意事项
- 确保你的 Base64 字符串以
data:font/truetype;base64,
开头,这样浏览器才能识别这是一个字体。 - 使用较大的字体时,会导致生成的 PDF 文件变得比较大,因此需要合理评估文件大小和加载时间之间的平衡。
内容由零声教学AI助手提供,问题来源于学员提问