skip to Main Content

Here is the UI currently
I am using PDFExport from "@progress/kendo-react-pdf". On click of download button(present on the right side) I need to download the UI in pdf.
But the text ‘285A Crown Street- 2022 Aug’ (text from the component contentInPdf() )shouldn’t be rendered on UI but should be present in the pdf downloaded.
Below is the code I have-

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>
)

Below is the component which must be included in pdf but not on UI

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

Below is the onClick function for download-

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

2

Answers


  1. Chosen as BEST ANSWER

    Ok here is the solution- Use class .k-pdf-export to modify pdf styles

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

    In css file (I'm using next.js hence modified global.scss)-

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

  2. I have faced the same issue in one of my projects. I handled the situation by rendering that item but adding too much padding so you can’t see it in the view.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search