无法读取 null react-pdf 的属性“hasGlyphForCodePoint”

Question

我知道当我注册一种新字体并在页面上创建一些 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>

波兰语字符适用于 arrays 上的第一项，下一项是“正在加载...”

Answer 1

也许它对某人有用，我通过创建一个新组件来解决它，我在其中传递道具并获取 pdfdownloadbutton 并将其导入到我的主要组件

import PdfButton from './PdfButton.jsx';

// (...)
<PdfButton id={_id}/>
// (...)

PDFButton.jsx

import { PDFDownloadLink } from '@react-pdf/renderer';
import MyDocument from './pdf.jsx';

class PdfButton extends Component {
    constructor(props){
        super(props)
        this.state = {
            id: this.props.id,
        }
    }
   
    render() {
        const FinancesList = () => {
            const [finances, setFinances] = useState([]);
            useEffect(() => {
                const requestFinancesList = async () => {
                    const financesList = await api.getAllFinances();
                    const { data } = financesList;
                    setFinances(data.data);
                };
                requestFinancesList();
            }, []);

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

        })
        return FinancesTable
    }
// (...)

Answer 2

const registerFont = () => {
    Font.register({
        family: 'Open Sans',
        src: `https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0e.ttf`,
    });
};

useEffect(() => {
    registerFont();
}, [])

尽早包含这些自定义 fonts (Font.register())。 可能在 index.js 或者在 App.js()

如果问题仍然存在，则在超时后渲染这些 ReactPdf 元素，即 PDFDownloadLink

const [flag, setflag] = useState(false)
    useEffect(() => {
        var timer=setTimeout(() => {
          setflag(true);
        }, 100)
    }, [])

{flag && <PDFDownloadLink document={resumeComponentInst} fileName="somename.pdf">
    {({ blob, url, loading, error }) =>
        loading ? 'Loading document...' : 'Download now!'
    }
</PDFDownloadLink>}

这将解决您的问题

Answer 3

确保在呈现任何内容之前调用Font.register ，因为这也会导致此错误。 但是，从这段代码片段中并不清楚渲染发生的位置。