Translation not working inside of PDF document

[mirankorkmaz]

I'm using the useTranslation hook in react to place inside my <Text></Text>, however it isn't rendering out the text, only the name of variable I'm declaring. Is this a well known issue or should it supposed to work if done correct?

[sagargulati]

+1

https://github.com/diegomura/react-pdf/issues/1734#issuecomment-1190760837

[mirankorkmaz]

@sagargulati I might be solving this issue tomorrow, I will let you know if I come up with a solution.

[sagargulati]

I'm also trying; let me know if you find a fix!

[dragi-ns]

Not sure if this will help you guys and there is probably a better solution, but I had the same problem with react-pdf and I solved it by wrapping react-pdf Document with react-i18next I18nextProvider.

const blob = await pdf(
  <I18nextProvider i18n={i18next}>
    <CVDocument values={formData} />
  </I18nextProvider>
).toBlob();

And I have standard call to i18next.init in index.js of the react app project.

i18next.init({
  interpolation: { escapeValue: false }, // React already does escaping
  lng: 'en', // language to use
  resources: {
    en: {
      main: main_en, // 'main' is our custom namespace
      form: form_en,
    },
    sr: {
      main: main_sr,
      form: form_sr,
    },
  },
});

[sagargulati]

It doesn't seem to work inside the API /api/generate/pdf endpoints

[BorntraegerMarc]

I managed to get it work with react-intl

[sagargulati]

I wouldn't recommend switching to react specific package while using a framework like next.js

[escapedcat]

react-intl is works with Next.js too. I'm using it for a custom SSR setup and works without issues.

[sagargulati]

Can you share an example?

[sdlfkorg]

any update on this issue?

I'm working on a nextjs project and use next-i18next for i18n feature. About this issue, I try to work around by import the i18n json in pdf-related component directly: import de from '@public/locales/de/crf.json'; import en from '@public/locales/en/crf.json';

and pass locale/language in the component to get the corresponding translation by language: locale === 'en' && en[your-translation-key] || '' locale === 'de' && de[your-translation-key] || ''

still, hope there is a way to make translation work in pdf document.