React中使用jsPDF生成泰米尔语PDF时文本排版错乱问题求助

问题原因 #

jsPDF原生的doc.text()方法仅支持简单的左到右拉丁系文字，无法处理泰米尔语这类需要字形组合/字符重排的复杂脚本。虽然PDF的文本编码是正确的（因此复制后显示正常），但渲染时无法正确计算字符的视觉位置，导致排版错乱。

解决方案 #

改用doc.html()方法生成PDF，该方法依赖html2canvas渲染HTML内容，能更好支持复杂文种的排版逻辑。

修改后的代码 #

import React from 'react'
import { jsPDF } from "jspdf";
import { font } from './Lohit-Tamil-normal'

function App() {
  function generateBill(event) {
    // 初始化jsPDF
    const doc = new jsPDF('p', 'mm', [200, 80]);
    
    // 构建包含泰米尔语的HTML片段，内嵌自定义字体
    const billHtml = `
      <style>
        @font-face {
          font-family: 'Lohit-Tamil';
          src: url(data:font/truetype;base64,${font}) format('truetype');
        }
        .tamil-text {
          font-family: 'Lohit-Tamil', sans-serif;
          font-size: 12px;
        }
      </style>
      <div class="tamil-text">
        <p style="margin-left: 30px;">பாத்திரக்கடை</p>
        <p>தேதி: ${new Date().toLocaleDateString('ta-IN')}</p>
        <p>வாடிக்கையாளர் பெயர்:</p>
      </div>
    `;

    // 使用html方法渲染内容
    doc.html(billHtml, {
      callback: function (pdf) {
        pdf.save('autoprint.pdf');
      },
      x: 5,
      y: 15,
      width: 190 // 适配PDF宽度
    });
  }

  return (
    <button type="button" onClick={generateBill}>Print</button>
  );
}

export default App;

关键说明 #

• 改用doc.html()：利用浏览器HTML渲染引擎处理泰米尔语的字形组合，规避jsPDF原生方法的局限性。
• 内嵌字体到HTML：通过@font-face将Base64字体嵌入HTML片段，确保渲染时能正确加载泰米尔语字体。
• 日期本地化：用toLocaleDateString('ta-IN')直接生成泰米尔语格式的日期，简化代码逻辑。

额外注意事项 #

• 确保安装了html2canvas（jsPDF依赖它处理HTML渲染），未安装则执行：

  npm install html2canvas
  

• 若仍有排版问题，可调整HTML中的字体大小、边距样式，或修改PDF的尺寸参数。

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