在 PDFExport 中包含来自“@progress/kendo-react-pdf”的组件，但从 UI 中的渲染中排除

Question

我正在使用“@progress/kendo-react-pdf”中的 PDFExport。单击下载按钮（位于右侧）我需要下载 pdf 格式的 UI。 但文本“285A Crown Street- 2022 Aug”（来自组件

contentInPdf()

的文本）不应呈现在 UI 上，而应出现在下载的 pdf 中。 下面是我的代码-

return (
<PDFExport
  ref={pdfExportComponent}
  paperSize="auto"
  margin={40}
  fileName={`Stack plan for asset [${assetName}] ${ monthSelected!=null?"-"+moment(monthSelected).format('YYYY MMM'):""}`}
  author="LaSalle Genie Team"
>
<div className="grid grid-cols-12 md:gap-2 xl:gap-4 mb-2 ">
  <div className="md:col-span-4 sm:col-span-12 mt-4 xl:mt-6 ">
  <div className="flex justify-start">
  {contentInPdf()}
  <div>
    <MonthPicker
          format={"MMM yyyy"}
          value={monthSelected}
          onDateChange={onDateChange}
          placeholder="Select Date"
          className={"no-export"}
        />
  </div>
  </div>
  </div>
  {!noData && <div className="md:col-span-8 sm:col-span-12 flex justify-end mt-4 xl:mt-6">
  
    {legends.map((item, index) => {
      return (
        <div className="mr-3 last:mr-0 flex" key={index}>
          <div
            className={"box-border h-5 w-5 border-1 " + item.bgColor}
          ></div>
          <div className="ml-1">{item.text}</div>
        </div>
      );
    })}
     <Tooltip anchorElement="target" position="top">
      <div className="my-auto ml-5 no-export"  onClick={exportPDFWithComponent}>
            <DownloadIcon title="Download PDF" className="cursor-pointer" />
        </div>
    </Tooltip>
    <span className="k-icon k-i-more-vertical"></span>
  </div>}
  </div>
</PDFExport>
)

下面是必须包含在 pdf 中但不能包含在 UI 中的组件

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

下面是下载的onClick函数-

    const exportPDFWithComponent = () => {
    if (pdfExportComponent.current) {
      pdfExportComponent.current.save();
    }
  };

Answer 1

我在我的一个项目中遇到了同样的问题。我通过渲染该项目但添加太多填充来处理这种情况，这样你就无法在视图中看到它。

Answer 2

好的，这是解决方案 - 使用类 .k-pdf-export 修改 pdf 样式

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

在css文件中（我正在使用next.js，因此修改了global.scss）-

.k-pdf-export .exportStackPlan{
    display:block !important
}

Answer 3

更简洁的方法是使用 PageTemplate ： https://www.telerik.com/kendo-react-ui/components/pdfprocessing/multi-page-content/#toc-page-templates

const PageTemplate = (props) {
    return ( <div style = {
        {
          position: 'absolute',
          top: '50px',
          left: '50%',
          transform: 'translateX(-50%)',
          fontSize: '18px',
        }
      } >
        {assetName}{ monthSelected!=null ? " - " + moment(monthSelected).format('MMM YYYY'):""}
      </div>
    )
  }

  <PDFExport
    pageTemplate = {PageTemplate}
    ref = {pdfExportComponent}
    paperSize = "auto"
    margin = {
      40
    }
    fileName = {
      `Stack plan for asset [${assetName}] ${ monthSelected!=null?"-"+moment(monthSelected).format('YYYY MMM'):""}`
    }
    author = "LaSalle Genie Team" >
    ...