React：生成并保存 PDF onClick() 问题 - Kendo

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

savePdf 的第一个参数是 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 方法文档的 link - https://www.telerik.com/kendo-react-ui/components/pdfprocessing/api/savePDF/

Answer 2

Kendo 不支持 rendering/saving DOM 之外的 PDF：https://github.com/telerik/kendo-react/issues/307#issuecomment-521232445

React：生成并保存 PDF onClick() 问题 - Kendo

React: Generate and save PDF onClick() problem - Kendo

javascript

reactjs

pdf

kendo-ui

telerik