如何将MUI组件转换为PDF?

Question

我需要将一个MUI组件转换为pdf。

我想将下面的组件转换为pdf，并在浏览器的pdf上下文中打开它:

<Typography component="h6" variant="h5">Hello World</Typography>

我尝试使用@react-pdf/renderer

组件:

Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Typography component="h6" variant="h5">Hello World</Typography>
</View>
</Page>
</Document>

然后尝试通过另一个函数打开它:

async function openPdf() {
const pdfBlob = await pdf(<MyPdf />).toBlob();
const pdfUrl = URL.createObjectURL(pdfBlob);
const pdfWindow = window.open(pdfUrl, '_blank');
pdfWindow.document.title = 'My PDF Document';
}

但是我得到以下错误:

TypeError: dispatcher.useInsertionEffect is not a function

我希望有人能帮助我

Answer 1

我做了一个项目，用React打印，我使用了lib ' React -to-print'，非常容易。

下面的代码是我如何使用的:

const handdlePrint = useReactToPrint({
content: () => componentRef.current,
documentTitle: 'cedulas',
onAfterPrint: () => alert('Print sucess'),
pageStyle: getPageMargins
})
return (
<>
<Button route="/" name="Voltar" style={{
position: `fixed`, left: `10px`}} 
/>
<div ref={componentRef} style={{width: '80%', height: window.innerHeight}}>
{
cedules.map((component, index) => {
console.log("here");
return (<div key={index} style={{margin: "50px 0"}}>
{component}
</div>)
})
}
</div>
<button onClick={handdlePrint}>Print</button>
</>
)