VueJS+jsPDF生成PDF时UTF-8特殊字符显示异常求助

在VueJS项目中使用jsPDF生成产品目录PDF，数据来自API并支持多语言切换（英文、法文等）。英文文本显示正常，但法文中的é、è、à、ç等特殊字符出现乱码（如显示为é、è），部分字符甚至空白。尝试过设置自定义字体但未解决，现需要一份VueJS环境下支持UTF-8编码的自定义字体配置脚本。

原示例代码 #

download() {
  let pdfRef = this.$refs.pdf;

  html2canvas(pdfRef).then(canvas => {
    let pdf = new jsPDF();
    const str = "éçàeéi test";
    pdf.save("Articles.pdf");
  });
}

当前PDF显示效果 #

éçàeéi test 显示为：é è à ç test

期望显示效果 #

éçàeéi test

解决方案：配置支持UTF-8的自定义字体 #

步骤1：准备字体文件

选择一款支持法文及UTF-8扩展字符的字体（如Noto Sans、Roboto等），将字体文件（.ttf格式）放入项目的public/assets/fonts目录下。

步骤2：转换字体为jsPDF兼容格式

使用jsPDF官方提供的字体转换工具，将.ttf文件转为.js格式，转换后得到的文件同样放入public/assets/fonts目录。

步骤3：Vue组件中配置字体并生成PDF

以下是完整的组件代码示例，包含字体注册、两种场景的PDF生成（直接写入文本/从canvas转换）：

<template>
  <div ref="pdf">
    <!-- 页面内容，包含法文字符 -->
    <p>éçàeéi test</p>
    <button @click="download">下载PDF</button>
  </div>
</template>

<script>
import jsPDF from 'jspdf'
// 引入转换后的字体文件（假设转换后的文件名为NotoSans.js）
import '@/public/assets/fonts/NotoSans.js'

export default {
  methods: {
    async download() {
      const pdf = new jsPDF()

      // 注册自定义字体
      pdf.addFont('NotoSans-Regular', 'NotoSans', 'normal')
      // 设置默认字体为自定义字体
      pdf.setFont('NotoSans')

      // 场景一：直接用jsPDF写入文本（解决字符乱码）
      const str = "éçàeéi test"
      pdf.text(str, 10, 10)

      // 场景二：从canvas转换（确保页面本身字符显示正常，canvas转换后不会乱码）
      const canvas = await html2canvas(this.$refs.pdf)
      const imgData = canvas.toDataURL('image/png')
      // 调整PDF尺寸适配canvas
      const pdfWidth = pdf.internal.pageSize.getWidth()
      const pdfHeight = (canvas.height * pdfWidth) / canvas.width
      pdf.addImage(imgData, 'PNG', 0, 20, pdfWidth, pdfHeight)

      pdf.save("Articles.pdf")
    }
  }
}
</script>

关键说明

• 必须确保转换后的字体文件正确引入，且addFont方法中的字体名称、样式与转换时的配置一致
• 如果仅使用canvas转换PDF，需保证页面中的字体已经加载支持法文的字体（即页面显示正常，canvas转换后自然正常）
• 直接使用pdf.text()写入文本时，必须先注册并设置自定义字体，否则默认字体无法解析UTF-8特殊字符

内容的提问来源于stack exchange，提问作者ruldane