import { PDFExport, savePDF } from '@progress/kendo-react-pdf';
const [contentRef, setContentRef] = useState('');
const downloadCertificate = () => {
const element: any =
document.querySelector('#certificate') || document.body;
savePDF(element, { paperSize: 'A4' });
};
const onClickDownload = () => {
downloadCertificate();
};
return (
<div>
<PDFExport ref={pdfExportComponent} paperSize="A4">
<iframe
id="certificate"
title="View your certificate"
className="u-els-margin-left-3x u-els-margin-right-3x"
width="776px"
height="600px"
srcDoc={contentRef}
/>
</PDFExport>
</div>
);
使用上面的代码集来生成pdf,我导入pdf导出并将其包装在我想导出为pdf的代码块周围。这里,iframe的
srcDoc
是我想要导出的,分配给useState
。因此,在页面呈现后,信息存储在srcDoc
中,我想在点击按钮时将其导出为pdf,这是返回的一部分。
目前不支持iframe
s作为PDF导出的一部分:https://www.telerik.com/kendo-react-ui/components/drawing/limitations-browser-support/#toc-elements-and-styles