Vue.js+ElementUI表格导出PDF中文乱码解决方案-代码聚汇网

Vue.js+ElementUI表格导出PDF中文乱码解决方案

秀云南

1. 问题背景与解决方案概述

在Vue.js+ElementUI项目中实现表格数据导出PDF功能时，很多开发者会遇到中文乱码问题。这个问题的根源在于jsPDF库本身对中文字体的支持非常有限。经过多次实践验证，我发现最可靠的解决方案是通过引入外部中文字体文件并正确注册到jsPDF中。

为什么常规方法会失败？jsPDF默认只包含基础的拉丁字符集，当遇到中文等非拉丁字符时，会使用替代字符或显示为乱码。这与PDF的字体嵌入机制有关——PDF文件需要包含所用字体的完整子集才能正确渲染。

2. 完整解决方案实施步骤

2.1 字体选择与准备

选择字体时需要考虑三个关键因素：

授权合规性：必须使用允许免费商用的字体
覆盖率：需要包含常用汉字（至少GB2312标准）
文件格式：需要TTF格式的字体文件

我推荐使用思源黑体（Source Han Sans），这是Adobe与Google合作开发的开源字体，完整覆盖简体中文需求。具体操作：

bash复制wget https://github.com/adobe-fonts/source-han-sans/raw/release/OTF/SourceHanSansSC-Regular.otf

注意：虽然原始链接提供的是OTF格式，但我们可以通过在线转换工具转为TTF格式。实际开发中建议将字体文件存放在项目的静态资源目录（如/public或/assets）

2.2 字体转换工具准备

jsPDF提供了专门的字体转换工具，我们需要从官方仓库获取：

bash复制git clone https://github.com/MrRio/jsPDF.git
cd jsPDF/fontconverter

关键文件是fontconverter.html，这是一个基于浏览器的转换工具。现代前端项目更推荐使用npm安装：

bash复制npm install jspdf jspdf-fontconverter

2.3 字体转换实操过程

转换时需要特别注意以下参数：

选择UMD编码格式（兼容性最好）
字体名称使用全小写（避免跨平台问题）
转换后检查字符集完整性

转换完成后会得到一个JS文件，其核心结构如下：

javascript复制var font = '...Base64编码的字体数据...';
var callAddFont = function() {
  this.addFileToVFS('simhei.ttf', font);
  this.addFont('simhei.ttf', 'simhei', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont])

2.4 字体注册与使用

在Vue项目中，推荐将字体文件放在assets目录，通过main.js全局注册：

javascript复制import '@/assets/js/simhei-normal.js'

使用时必须确保注册名称与使用名称完全一致：

javascript复制const doc = new jsPDF()
doc.setFont('simhei')  // 必须与注册时的名称一致
doc.text('中文内容', 10, 10)

3. 完整实现示例

3.1 Vue组件集成方案

基于ElementUI表格的完整导出实现：

javascript复制import { jsPDF } from 'jspdf'
import autoTable from 'jspdf-autotable'
import '@/assets/js/simhei-normal.js'

export default {
  methods: {
    async exportToPDF() {
      const doc = new jsPDF({
        orientation: 'landscape',
        unit: 'pt'
      })
      
      // 设置中文字体
      doc.setFont('simhei')
      doc.setFontSize(16)
      doc.text('报表标题', doc.internal.pageSize.width / 2, 20, { align: 'center' })
      
      // 准备表格数据
      const headers = [['列1', '列2', '列3']]
      const body = this.tableData.map(item => [item.col1, item.col2, item.col3])
      
      // 使用autoTable插件
      autoTable(doc, {
        head: headers,
        body: body,
        startY: 40,
        styles: {
          font: 'simhei',
          fontSize: 10,
          cellPadding: 5
        }
      })
      
      doc.save('export.pdf')
    }
  }
}

3.2 关键配置参数说明

参数	推荐值	说明
orientation	landscape	横向布局适合宽表格
unit	pt	点单位更精确控制布局
font	simhei	必须与注册字体名一致
fontSize	10-12	中文建议不小于10pt
cellPadding	5	单元格内边距

4. 常见问题与解决方案

4.1 字体加载失败问题

症状：控制台警告"Font simhei not found"
解决方案：

确保字体文件已正确引入项目
检查注册代码是否在创建jsPDF实例前执行
添加延迟确保字体加载完成：

javascript复制setTimeout(() => {
  const doc = new jsPDF()
  // 导出操作
}, 500)

4.2 复杂表格布局问题

症状：表格内容溢出或布局错乱
解决方案：

使用autoTable的columnStyles精细控制列宽
设置合适的表格起始位置(startY)
对长文本启用自动换行：

javascript复制autoTable(doc, {
  // ...
  styles: {
    overflow: 'linebreak'
  }
})

4.3 性能优化方案

当导出大量数据时（超过1000行），建议：

分页处理：设置pageBreak: 'auto'
启用willDrawCell钩子进行性能优化
显示加载状态提升用户体验

javascript复制const loading = this.$loading({ lock: true })
try {
  // 导出操作
} finally {
  loading.close()
}

5. 高级技巧与最佳实践

5.1 多语言支持方案

如果需要支持多种语言，可以注册多个字体：

javascript复制// 注册简体中文
this.addFont('simhei.ttf', 'simhei-cn', 'normal')
// 注册日文
this.addFont('mplus.ttf', 'mplus-jp', 'normal')

使用时根据内容切换字体：

javascript复制doc.setFont('simhei-cn')
doc.text('中文内容', 10, 10)
doc.setFont('mplus-jp')
doc.text('日本語コンテンツ', 10, 30)

5.2 自定义样式扩展

通过hook函数实现复杂样式：

javascript复制autoTable(doc, {
  // ...
  willDrawCell: (data) => {
    if (data.row.index === 0) {
      data.cell.styles.fillColor = [240, 240, 240]
    }
  }
})

5.3 服务器端渲染方案

对于需要后端生成PDF的场景，推荐：

javascript复制const { jsPDF } = require('jspdf')
require('./simhei-normal.js')

function generatePDF(data) {
  const doc = new jsPDF()
  // ...生成逻辑
  return doc.output('arraybuffer')
}

6. 替代方案比较

虽然本文重点介绍jsPDF方案，但开发者应该了解其他可选方案：

方案	优点	缺点
jsPDF+autoTable	纯前端实现，轻量	中文支持需要额外配置
pdfmake	内置中文支持	包体积较大
后端生成(PDFKit等)	稳定性高	需要后端配合

对于大多数Vue项目，jsPDF+autoTable仍然是平衡性最好的选择，特别是需要复杂表格布局时。我在实际项目中测试过导出超过50列的宽表格，autoTable的自动分页和列宽计算表现非常可靠。