Vue项目导出PDF时字体失效？试试这五种解决方案！

2024-08-04 04:34:04

Vue 项目中使用 vue-to-pdf 导出 PDF 时字体失效怎么办？

在 Vue.js 项目中，我们常常需要将特定内容导出为 PDF 文件。vue-to-pdf 作为一个轻量级的 PDF 导出插件，为我们提供了便捷的解决方案。然而，部分开发者在使用过程中可能会遇到字体设置失效的问题，生成的 PDF 文件无法准确显示预期的字体样式。本文将深入探讨这个问题的根源，并提供有效的解决方案，帮助你解决 PDF 导出过程中的字体难题。

vue-to-pdf 的工作原理

在深入探讨解决方案之前，我们先来了解一下 vue-to-pdf 的工作原理。vue-to-pdf 的核心是将 HTML 元素转换为 canvas，再将 canvas 转换为 PDF。在这个转换过程中，如果字体文件没有被正确加载或者加载顺序出现问题，就会导致最终生成的 PDF 文件中字体显示异常。

解决方案

1. 确保正确引入字体文件

首先，我们需要确保在项目中正确引入了所需的字体文件。你可以选择将字体文件下载到本地项目中，并通过 @font-face 规则引入；也可以直接使用在线字体库。

本地引入示例：

@font-face {
  font-family: 'MyCustomFont'; 
  src: url('./my-custom-font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

在线字体库示例：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

在上面的例子中，我们分别演示了如何引入本地字体文件 my-custom-font.ttf 和 Google Fonts 中的 Roboto 字体。

2. 确保字体文件加载完成

vue-to-pdf 在将 HTML 元素转换为 canvas 时，如果字体文件尚未加载完成，就会导致字体设置失效。为了解决这个问题，我们可以使用 @font-face 规则中的 load 事件来监听字体文件加载状态。

const font = new FontFaceObserver('MyCustomFont'); // 使用 FontFaceObserver 库

font.load().then(() => {
  // 字体加载完成后执行导出操作
  this.$PDFSave(this.$refs['pdfContent'], 'my-document.pdf');
}, (err) => {
  // 字体加载失败
  console.error('Font failed to load:', err);
});

代码中，我们使用了 FontFaceObserver 库来监听 MyCustomFont 字体的加载状态。只有当字体加载完成后，才会执行 this.$PDFSave 方法进行 PDF 导出。

3. 使用 Base64 编码字体文件

为了彻底避免字体文件加载顺序带来的问题，我们可以将字体文件转换为 Base64 编码，并直接嵌入到 CSS 文件中。

你可以使用在线工具（例如 https://transfonter.org/）将字体文件转换为 Base64 编码。

示例：

@font-face {
  font-family: 'MyCustomFont';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,/* ... base64 编码 ... */) format('truetype');
  font-weight: normal;
  font-style: normal;
}

将转换后的 Base64 编码字符串替换上面代码中的 /* ... base64 编码 ... */ 。

使用 Base64 编码可以直接将字体文件嵌入到 CSS 中，避免了文件加载顺序的问题，但也可能增加 CSS 文件的大小。