WordPress Eventin内嵌jsPDF：HTML转PDF中文不显示求助

你已经通过addFont让doc.text正常显示中文，但doc.html转换时中文丢失，核心原因是html方法依赖的渲染引擎不会自动继承jsPDF的全局字体设置，需要同时完成字体的VFS注册和HTML内容的CSS字体指定。

解决步骤 #

1. 将SimHei.ttf转为base64编码（可使用jsPDF官方的fontconverter工具生成）
2. 通过addFileToVFS将字体加入虚拟文件系统，再用addFont注册
3. 在HTML内容中嵌入CSS，明确指定所有需要显示中文的元素使用SimHei字体

完整代码示例 #

// 替换为你用fontconverter生成的SimHei.ttf base64编码
const simHeiBase64 = "AAEAAAATAQA...";

const jsPDF = window.jspdf.jsPDF;
const doc = new jsPDF("p", "pt", "a4");

// 注册字体到VFS并添加到jsPDF
doc.addFileToVFS("SimHei.ttf", simHeiBase64);
doc.addFont("SimHei.ttf", "SimHei", "normal");
doc.setFont("SimHei"); // 全局设置确保text方法正常，html方法仍需CSS指定

// 带字体样式的HTML内容
let getContent = `
<style>
  /* 给所有文本元素强制指定字体 */
  * {
    font-family: 'SimHei', sans-serif !important;
  }
</style>
<p>Octonyan loves jsPDF 中文字</p>
`;

doc.html(getContent, {
  callback: function () {
    doc.save(ticketname);
  },
  x: 10,
  y: 10,
});

关键说明 #

• 为什么用VFS：远程字体路径可能存在跨域或加载延迟问题，VFS是本地虚拟文件系统，能确保渲染引擎快速访问到字体文件
• CSS必须指定：html2canvas（jsPDF html方法的底层依赖）会严格按照HTML的CSS样式渲染，只有明确指定字体，才能调用已注册的SimHei字体显示中文
• 字体名要一致：CSS中的font-family名称必须和addFont时的第二个参数完全相同（这里是SimHei）

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