diegomura / react-pdf

📄 Create PDF files using React
https://react-pdf.org
MIT License
14.82k stars 1.17k forks source link

Unicode Characters not printing #852

Closed DeepakKapiswe closed 4 years ago

DeepakKapiswe commented 4 years ago

Hello Team, Thanks for this nice library it does exactly what I wanted , for me English characters are getting printed well but the unicode characters not changed with some numbers, (those unicode characters are from Devnagri Hindi script) please let me know what to do , so that I get the pdf correctly?

6M0@ .>'5 60M.>
6M0@ .>'5 60M.>
6M0@ .>'5 8>5
6M0@ 0>.> />&5 0M+ (G$> @

I get this in place of names like -> श्री हरी नारायण

while I changed the code to include fonts, please correct me if I'm missing something. my code snippet

Font.register(
  'https://fonts.gstatic.com/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr5DRASf6M7VBj.woff2',
  { family: 'Noto Sans Hindi'}
);

const styles2 = StyleSheet.create({
  body: {
    paddingTop: 35,
    paddingBottom: 65,
    paddingHorizontal: 35,
  },
  hindi: {
    margin: 12,
    fontSize: 14,
    fontFamily: 'Noto Sans Hindi'
  },
});

export function PdfDocument() {
  return (
  <Document>
    <Page style={styles2.body}>
      <Text style={styles2.hindi}> 
        Hindi: 
        यह एक को इनका देखिए ईश्वर की कृपा   {'\n'}
        हमने भी किया पर्यावरण, हमारा भी यही ख़याल है 
      </Text>
    </Page>
  </Document>
)
}

The error I get

Unhandled Rejection (Error): Unknown font format
push../node_modules/@react-pdf/fontkit/dist/fontkit.browser.es.js.fontkit$1.create
node_modules/@react-pdf/fontkit/dist/fontkit.browser.es.js:68
FontSource._callee2$
src/font/font.js:35
  32 | if (BROWSER || isUrl(this.src)) {
  33 |   const { headers, body, method = 'GET' } = this.options;
  34 |   const data = await fetchFont(this.src, { method, body, headers });
> 35 |   this.data = fontkit.create(data);
     | ^  36 | } else {
  37 |   this.data = await new Promise((resolve, reject) =>
  38 |     fontkit.open(this.src, (err, data) =>
View compiled
▶ 5 stack frames were collapsed. 

Please help Thanks in Advance

DeepakKapiswe commented 4 years ago

Finally after struggling a lot, I came across this post comment and now all is working fine, just follow his words! Thanks a lot. https://github.com/diegomura/react-pdf/issues/807#issuecomment-577136660

aaumkar commented 3 years ago

I am trying the similar thing. Hindi or Devnagari fonts. But this is the error I get. It would be great if anyone could help!

Karma Google Font I am using

Imports

import notoSans from "../Fonts/Karma/Regular1.ttf";

Font.register({
  family: "Karma-400",
  src: notoSans,
  fontWeight: 400,
});
Error: Could not resolve font for Karma-400, fontWeight 400
    resolve font.js:141
    getFont index.js:48
    _callee$ index.js:57
    Babel 8
    fetchAssets resolveAssets.js:47
    _callee$ resolveAssets.js:84
    Babel 8
    _callee$ asyncCompose.js:60
    Babel 20
    _callee$ index.js:35
    Babel 8
    _callee2$ index.js:58
    Babel 8
    queueDocumentRender dom.js:26
    start index.js:145
    method index.js:59
    queueDocumentRender dom.js:26
    onChange index.js:22
    commitRootImpl react-reconciler.development.js:15046
index.js:1
    e index.js:1
    overrideMethod react_devtools_backend.js:2842
    onRenderFailed dom.js:32
    emit events.js:153
    next index.js:108
    start index.js:150
    (Async: promise callback)
    start index.js:149
    method index.js:59
    queueDocumentRender dom.js:26
    onChange index.js:22
    commitRootImpl react-reconciler.development.js:15046
    unstable_runWithPriority scheduler.development.js:818
    runWithPriority react-reconciler.development.js:1884
    commitRoot react-reconciler.development.js:14909
    finishSyncRender react-reconciler.development.js:14313
    performSyncWorkOnRoot react-reconciler.development.js:14291
    flushSyncCallbackQueueImpl react-reconciler.development.js:1934
    unstable_runWithPriority scheduler.development.js:818
    runWithPriority react-reconciler.development.js:1884
    flushSyncCallbackQueueImpl react-reconciler.development.js:1929
    flushSyncCallbackQueue react-reconciler.development.js:1917
    scheduleUpdateOnFiber react-reconciler.development.js:13693
    updateContainer react-reconciler.development.js:17081
    updateContainer index.js:30
    usePDF dom.js:47
    React 5
    unstable_runWithPriority scheduler.development.js:468
    React 4
    unstable_runWithPriority scheduler.development.js:468
    React 17
    js index.js:87
    js main.chunk.js:13404
    Webpack 7
suraj480 commented 2 years ago

how to pirnt arabic in tag

taj567 commented 2 years ago

guys, with react-pdf/renderer an unable to load the Hindi text in pdf using react. with front-end text: हिंदी में किसी Break 52 output in pdf:9?&@ .G ?8@

any one

Owais-Ahmed7 commented 1 year ago

guys, with react-pdf/renderer an unable to load the Hindi text in pdf using react. with front-end text: हिंदी में किसी Break 52 output in pdf:9?&@ .G �?8@

any one bro download trio devangiri font from google fonts it wil work fine i came across this issue too it fixed this issue