无法读取 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,area,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>

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

解决方法

也许它对某人有用，我通过创建一个新组件来解决它，我在其中传递道具并获取 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
    }
// (...)

,

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

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

尽早包含这些自定义字体 (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,error }) =>
        loading ? 'Loading document...' : 'Download now!'
    }
</PDFDownloadLink>}

这将解决您的问题