PDFMake项目中使用HTTP异步加载自定义字体解决方案

背景介绍

在PDFMake项目中，当需要生成包含中文等特殊字符的PDF文档时，开发者常常会遇到字体加载的问题。特别是使用像Google NotoSansSC这样的中文字体时，由于字体文件体积较大（单个文件可能超过10MB），直接打包到应用中会导致应用体积膨胀，影响用户体验。

问题分析

通过HTTP动态加载字体是一种常见的解决方案，但开发者发现PDFMake在首次生成PDF时，字体文件尚未完成下载，导致生成的PDF文档无法正确显示中文字符。只有在第二次生成时，由于字体已被缓存，才能正常工作。

解决方案

使用Promise预加载字体

核心思路是在应用初始化阶段就预先加载所需字体，确保在生成PDF时字体已经准备就绪。以下是实现这一目标的技术方案：

1. 创建字体加载Promise：在应用启动时创建一个Promise来异步加载字体文件
2. 等待字体加载完成：在生成PDF前确保字体加载Promise已经resolve
3. 配置PDFMake使用预加载字体：将加载完成的字体数据配置到PDFMake中

实现代码示例

// 定义字体加载函数
function loadFont(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';
    
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error('字体加载失败'));
      }
    };
    
    xhr.onerror = function() {
      reject(new Error('网络错误'));
    };
    
    xhr.send();
  });
}

// 应用启动时预加载字体
const fontPromise = loadFont('https://example.com/NotoSansSC-Regular.ttf');

// 生成PDF时确保字体已加载
async function generatePdf() {
  try {
    const fontData = await fontPromise;
    
    // 配置PDFMake字体
    pdfMake.fonts = {
      NotoSansSC: {
        normal: fontData,
        bold: fontData,
        italics: fontData,
        bolditalics: fontData
      }
    };
    
    // 定义文档内容
    const docDefinition = {
      content: '这里是中文内容',
      defaultStyle: {
        font: 'NotoSansSC'
      }
    };
    
    // 生成PDF
    pdfMake.createPdf(docDefinition).download();
  } catch (error) {
    console.error('生成PDF失败:', error);
  }
}

优化建议

1. 字体缓存：将下载的字体数据存储在本地存储中，避免每次应用启动都重新下载
2. 进度提示：在字体加载过程中显示进度条或加载状态，提升用户体验
3. 错误处理：完善错误处理机制，当字体加载失败时提供备用方案或友好提示
4. 字体子集化：考虑使用字体子集工具，只包含实际需要的字符，减小字体文件体积

总结

通过Promise预加载技术，开发者可以优雅地解决PDFMake中HTTP加载大体积字体时的异步问题。这种方法不仅适用于中文字体，对于任何需要通过网络加载的字体资源都同样有效。关键在于确保在生成PDF文档前，所有必要的字体资源都已准备就绪。