본문 바로가기
react PDF실무 경험

react PDF 한글 깨질 때 해결 법

1분실무 경험티스토리에서 옮긴 글

jsx
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만 입혔더니 잘 적용 됩니다~

  • #react PDF
  • #한글 깨질 때

실무 경험의 다른 글