如何让Kendo React PDFExport包含组件但不渲染至UI

要实现contentInPdf()返回的文本不在UI显示，但包含在导出的PDF中，可通过CSS结合Kendo PDFExport的特性来实现：

步骤1：修改contentInPdf组件，添加自定义类 #

给仅需在PDF中显示的元素添加专属类名，用于控制显示状态：

const contentInPdf = () => {
  return (
    <div className="pdf-only-content">
      {assetName} {monthSelected != null ? "-" + moment(monthSelected).format('YYYY MMM') : ""}
    </div>
  );
};

步骤2：添加CSS样式控制显示 #

利用Kendo PDFExport导出时会给根容器添加k-pdf-export类的特性，编写样式实现页面隐藏、导出显示：

/* 页面中隐藏元素，不占用布局空间 */
.pdf-only-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* PDF导出时恢复元素正常显示 */
.k-pdf-export .pdf-only-content {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
}

原理说明 #

Kendo React的PDFExport组件在执行导出操作时，会自动给整个导出内容的根容器添加k-pdf-export类。我们通过这个类选择器，在导出时恢复目标元素的正常显示状态；同时在常规页面中将元素移出视口隐藏，既不影响UI布局，又能确保内容被正确包含在PDF里。

原渲染代码和下载按钮逻辑无需改动，保持现有结构即可。

内容的提问来源于stack exchange，提问作者Vandana