反应:生成并保存PDF onClick() 问题 - 剑道

Question

我想要实现的是生成并保存PDF文件onClick((，而不是在DOM中渲染任何东西。

内容应该有 React 组件 HTML 和 CSS。

我找到了@progress/kendo-react-pdf软件包：https://www.telerik.com/kendo-react-ui/components/pdfprocessing/

我的错误示例：https://stackblitz.com/edit/react-taumpw?file=index.js

Answer 1

Kendo 不支持在 DOM： https://github.com/telerik/kendo-react/issues/307#issuecomment-521232445 之外渲染/保存 PDF

Answer 2

保存 PDF 的第一个参数是 DOM 元素，而不是 JSX 元素。 这将起作用。

class App extends Component {
exportPDF() {
// TODO: Fetch data from backend
// TODO: Move content generator to different function
// const element = <h2>teeeeest</h2>
const element = document.getElementById('test')
savePDF(element, {
paperSize: 'A4',
fileName: 'report.pdf',
margin: { top: '2cm', left: '1.5cm', right: '1.5cm', bottom: '2cm' },
scale: 0.8,
keepTogether: '.card',
});
}
render() {
return (
<div>
<h1 id='hello'>Hello Kendo</h1>
<h2 id='test' style={{display: 'none'}}>teeeest</h2>
<NavLink className="pr-1" to="#" onClick={() => this.exportPDF()}>DOWNLOAD PDF</NavLink>
</div>
);
}
}

这是savePdf方法的文档链接 - https://www.telerik.com/kendo-react-ui/components/pdfprocessing/api/savePDF/