如何在React应用中使用@progress/kendo-react-pdf渲染泰米尔字体到PDF

Hey there! I’ve dealt with exactly this kind of Tamil font rendering issue using Kendo React PDF before—complex script languages like Tamil don’t play nicely with the default fonts used in the PDF export process. Let’s break down the fixes you need to apply:

1. Add a Tamil-Supported Font to Your Project #

First, you need to include a font that properly renders Tamil characters. Noto Sans Tamil (from Google’s Noto font family) is a great choice because it’s designed for multilingual support and is free to use.

• Download the font files (TTF or WOFF2) and place them in your project’s public/fonts directory (create the folder if it doesn’t exist).
• Add a @font-face declaration in your global CSS file (like index.css):

@font-face {
  font-family: 'Noto Sans Tamil';
  src: url('/fonts/NotoSansTamil-Regular.woff2') format('woff2'),
       url('/fonts/NotoSansTamil-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ensures text is visible while font loads */
}

2. Apply the Font to Your React Component ABC #

Make sure the Tamil text in your ABC component uses this font. You can apply it directly to the component’s container:

import React from 'react';

const ABC = () => {
  return (
    <div style={{ fontFamily: "'Noto Sans Tamil', sans-serif" }}>
      <p>English text: Hello World!</p>
      <p>Tamil text: வணக்கம் உலகம்!</p>
    </div>
  );
};

export default ABC;

3. Configure Kendo PDFExport to Use the Embedded Font #

The key step here is ensuring Kendo’s PDF export tool loads and embeds the Tamil font into the generated PDF. You need to explicitly specify the font family in the PDFExport component’s props, and also ensure the font is loaded before triggering the export.

Here’s how your export component might look:

import React, { useRef } from 'react';
import { PDFExport } from '@progress/kendo-react-pdf';
import ABC from './ABC';

const PDFExporter = () => {
  const pdfExportRef = useRef(null);

  const handleExport = () => {
    pdfExportRef.current.save();
  };

  return (
    <div>
      <button onClick={handleExport}>Export to PDF</button>
      <PDFExport
        ref={pdfExportRef}
        paperSize="A4"
        fontFamily="'Noto Sans Tamil', sans-serif" // Critical for Tamil rendering
        margin={{ top: 20, bottom: 20 }}
      >
        <ABC />
      </PDFExport>
    </div>
  );
};

export default PDFExporter;

4. Verify Font Embedding (Troubleshooting) #

If you still see garbled text, check these points:

• Ensure the font file paths are correct (browser dev tools can help confirm the font is loading without 404 errors).
• Make sure the font you’re using supports Tamil script (avoid generic fonts like Arial or Times New Roman, which often don’t handle complex scripts well).
• For older versions of @progress/kendo-react-pdf, you might need to use the font option to pre-load the font. You can do this by adding a script to load the font before initializing the export:

// Add this at the top of your component or in index.js
import '@progress/kendo-react-pdf/dist/all-fonts.js'; // Loads default fonts, but pair with your Tamil font

By following these steps, your Tamil text should render correctly in the exported PDF. The main issue is almost always that the PDF export tool doesn’t have access to a Tamil-compatible font, so explicitly embedding and specifying it fixes the problem.

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