无法读取空反应-pdf 的属性'hasGlyphForCodePoint'

Question

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

这是我的简化代码:

MyDocument

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>

波兰字符适用于数组的第一项，下一个是"Loading…">

Answer 1

也许它会对某些人有用，我通过创建一个新组件来解决它，其中我传递props并获得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();
}, [])

尽早包含这些自定义字体(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，因为这也会导致此错误。但是，从这段代码片段中，不清楚渲染发生在哪里。