javascript - 无法读取 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>
波兰字符适用于数组上的第一项,下一个是“正在加载...”
解决方案
确保Font.register
在渲染任何内容之前调用,因为这也会导致此错误。但是,从这段代码片段中,尚不清楚渲染发生在哪里。
推荐阅读
- c++ - 我可以将 void* 转换为 unique_ptr 吗?
- javascript - Node JS 服务器,无法获取 index.html
- mysql - 使用group by function时选择特定的id [MySQL]
- kdb - 使用设置窗口计算 2 个列表的加权移动平均值
- python - 在 python 类中引用整数作为静态变量
- c# - Asp.net core 返回 View 或 Json/XML 的最干净方式
- javascript - 点击跟踪的高阶 React 组件
- r - 如何为数据框中的所有分类变量制作频率表?
- javascript - php curl 使用 html 下拉选择填充变量
- angular - Ag Grid -CellEditor FocusOut