reactjs - React-pdf utf8 字体在即时渲染时不起作用，但在渲染时工作正常

Question

我的问题是我试图用“on-fly-rendering”保存 pdf 文件，而 utf8 字体不起作用。但是在渲染中显示相同的 pdf 时效果很好。

创建 PDF:

Font.register({
  family: "Roboto",
  src:
    "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-light-webfont.ttf"
});

const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
    fontFamily: "Roboto",
    
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

显示并保存 pdf:

              <PDFViewer>
                <MyDocument data={data} />
              </PDFViewer>
              <PDFDownloadLink document={<MyDocument data={data}/>} fileName="lista_składników.pdf">
            {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'zapisz pdf')}
          </PDFDownloadLink>

使用 PDFViewer 输出:

使用 PDFDownloadLink 输出:

Answer 1

当只有第一个 PDFDownloadLink 注册了字体时，我遇到了同样的问题。在第二个字体中，字体不起作用。

我最终使用了一种更好的方法 - 通过单击按钮生成 PDF，而不是在加载组件时生成 PDF。

https://github.com/diegomura/react-pdf/issues/736

import { saveAs } from 'file-saver';
import { pdf, Page, Text, View, Document } from '@react-pdf/renderer';

const generatePdfDocument = async (fileName, pdfDocumentComponent) => {
    const blob = await pdf(pdfDocumentComponent).toBlob();
    saveAs(blob, fileName);
};

const MyDocument = () => (
    <Document>
        <Page size="A4">
            <View>
                <Text>Section #1</Text>
            </View>
        </Page>
    </Document>
);

const DownloadButton = () => (
    <button
        type="button"
        onClick={() => {
            generatePdfDocument('MyDocument.pdf', <MyDocument />);
        }}
    >
        Download PDF
    </button>
);

export default DownloadButton;