如何使用kendo ui在從react組件下載的pdf中添加頁腳

Question

我的要求是從帶有頁腳的 React 組件下載 pdf，但是如何在 Kendo UI 中使用 PDFExport 在 pdf 中添加頁腳？

我在我的 React 組件中使用PDFExport ，所以我在點擊下載時得到一個 pdf，但要求是下載帶有頁腳的 pdf。

請幫助，Kendo Ui 支持者。

 <PDFExport ref={component => (this.pdfExportComponent = component)} scale={0.6} fileName={`${selectedBusinessName}DataMap`} margin="2cm" > <div style={{ width: '385mm' }}> <h2 style={{ textAlign: 'start' }}> {selectedBusinessName.toUpperCase()} </h2> <h4 style={{ marginTop: '-20px', textAlign: 'start' }}> {TotalProcesses} processes flow, {TotalProcessesCategory} data categories, {TotalProcessesSystem} systems. </h4> <div> <div className="chart-header"> <p style={{ marginLeft: '30px', color: '#cc9933' }}> PROCESSES </p> <p style={{ color: '#cc9933' }}>DATA OBJECTS</p> <p style={{ marginRight: '49%', color: '#cc9933' }}>SYSTEMS</p> </div> {processesByFunction && processesByFunction.map(itm => ( <StyleRoot key={`mykey${itm.id}`}> <div className="chart-view-modal" key={`mykey${itm.id}`}> <p className="procees-name" key={`mykey${itm.id}`} style={styles.bounce} > {itm.name.toUpperCase()} </p> <span className="chart-line-view-modal" style={stylesArrow.bounce} /> <p className="procees-category" style={stylesCat.bounce}> {itm.category_id.map((item, key) => ( <span key={item.value}> {item.label.toUpperCase()} {key < itm.category_id.length - 1 ? ( <span> , </span> ) : ( '' )} </span> ))} </p> <span className="chart-arrow-view-modal" style={styles3.bounce} > <img src={RightArrow} alt="right-arrow" /> </span> <div className="chart-system-block" style={stylesSys.bounce} > {itm.system_id.map((item, key) => ( <Fragment key={`mykey${item.value}`}> <p className="procees-system"> {item.label.toUpperCase()} </p> {key < itm.system_id.length - 1 ? ( <span className="chart-arrow-view-modal-sys"> <img src={RightArrow} alt="right-arrow" /> </span> ) : ( '' )} {/*{key < itm.system_id.length - 1 ? (*/} {/* <i*/} {/* className="fa fa-arrow-right"*/} {/* style={{ alignSelf: 'center' }}*/} {/* />*/} {/*) : (*/} {/* ''*/} {/*)}*/} </Fragment> ))} </div> </div> </StyleRoot> ))} </div> </div> </PDFExport>

reactJS #kendoUI #javascript

Answer 1

使用 Kendo UI 提供的頁面模板，

請在下面找到相同的示例。 （包括標題） 示例