首页 > 解决方案 > 无法读取 null react-pdf 的属性“hasGlyphForCodePoint”

问题描述

我知道当我注册一种新字体并在页面上创建一些 pdf 时会发生这种情况。当字体为标准时,错误消失,但我需要波兰字符 łść 等。

这是我的简化代码:

我的文档

import { Page, Text, View, Document, StyleSheet, Font } from '@react-pdf/renderer';

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: '#ffffff',
    fontFamily: "Roboto"
  },
  section: {
    margin: 10,
    padding: 10,
  },
});

const MyDocument = ({number,owner, title, charge, term, account}) => (

    <Document> 
      <Page size="A4" style={styles.page} >       
        <View style={styles.section}>
           <Text>Tytuł: {title}</Text>
        </View>
      </Page>
    </Document>
)
import MyDocument from './pdf.jsx';

// (...)
 const FinancesTable = finances.map((finance, index) => {
            const { _id, allotment_number,owner,  title, area, charge, term, status, account } = finance;
            
            return (
                <tr key={_id}>
                    <td>{allotment_number}</td>
                    <td>{title}</td>
                    <td>{area} m²</td>
                    <td>{charge} zł</td>
                    <td>{term}</td>
                    <td>{status}</td>
                    <td>
                        <PDFDownloadLink
                        document={MyDocument({ number: allotment_number,
                                               owner: this.props.auth.user.firstname+ ' '+this.props.auth.user.lastname,
                                               title: title,
                                               charge: charge,
                                               term: term,
                                               account: account,
                                            }) } 
                        fileName="faktura.pdf">
                        {({ blob, url, loading, error }) => (loading ? 'Ładowanie...' :  <Button style={BlueButtonStyle}>Pobierz</Button>)}
                        </PDFDownloadLink></td>
                </tr>
            );
    // (...)
return <tbody>{FinancesTable}</tbody>

波兰字符适用于数组上的第一项,下一个是“正在加载...”

标签: javascriptarraysreactjsreact-pdf

解决方案


确保Font.register在渲染任何内容之前调用,因为这也会导致此错误。但是,从这段代码片段中,尚不清楚渲染发生在哪里。


推荐阅读