지식 정리 📝

react PDF 한글 깨질 때 해결 법

엄성준 2023. 10. 12. 08:58
import {
  Document,
  Font,
  Page,
  PDFViewer,
  StyleSheet,
  Text,
} from '@react-pdf/renderer';
import React from 'react';

Font.register({
  family: 'SpoqaHanSans',
  src:
    'https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@01ff0283e4f36e159ffbf744b36e16ef742da6d8/Subset/SpoqaHanSans/SpoqaHanSansLight.ttf',
});

const styles = StyleSheet.create({
  viewer: {
    flex: 1,
  },
  korean: {
    fontFamily: 'SpoqaHanSans',
  },
  english: {},
});

const PDFDocument = () => {
  return (
    <PDFViewer style={styles.viewer}>
      <Document>
        <Page>
          <Text style={styles.korean}>
            한국어한국어한국어아아아국국국어어어
          </Text>
          <Text>English</Text>
        </Page>
      </Document>
    </PDFViewer>
  );
};

style로 font만 입혔더니 잘 적용 됩니다~