我如何使用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 提供的页面模板，

请在下面找到相同的示例。 （包括标题） Example