React-to-print: print prop example

Created on 5 Oct 2020  路  5Comments  路  Source: gregnb/react-to-print

I am trying to bypass the window.print functionality so I can process the iframe element to generate a Word document.
However I cannot get it to work; I always get Promise "missing the following properties from type 'Promise': then, catch, [Symbol.toStringTag], finally".

Are there any examples on the repository that would help??

question

Most helpful comment

Followed your corrections and it works now! Thanks for the help.

I did change exportDocIFrame to read from exportDocIFrame.contentWindow.document.body.innerHTML instead, as the htmlDocx library only parses String.

All 5 comments

Hello, interesting use case!

Do you mind sharing your code so I can help diagnose the issue? It sounds like the print method you are supplying isn't returning a Promise though, which is required for it to work

This is what I have currently.

  const handlePrintWord = useReactToPrint({
    content: () => exportDocRef.current,
    onAfterPrint: () => {
      props.setOpen(false);
    },
    print: (target: HTMLIFrameElement) => handleSaveWord,
    removeAfterPrint: true,
  });

  const handleSaveWord: Promise<any> = (exportDocIFrame: HTMLIFrameElement) => {
    let converted = htmlDocx.asBlob(exportDocIFrame);
    saveAs(converted, "test.docx");
    return Promise.resolve({ value: { then: "", catch: "", finally: "" } });
  };

It is returning a typescript error:

TypeScript error in C:/.../ExportDoc.tsx(48,40):
Type '(exportDocIFrame: HTMLIFrameElement) => Promise<{ value: { then: string; catch: string; finally: string; }; }>' is missing the following properties from type 'Promise': then, catch, [Symbol.toStringTag], finally TS2739

package.json

  • "react-to-print": "^2.10.0",
  • "typescript": "^3.9.7",
  • "react": "^16.13.1"

Thanks for your help!

Hmm. You should be able to just return Promise.resolve() without needing to pass it a value.

If that doesn't work, try this:

// Also, your typing is slightly wrong here, I've corrected it
// `handleSaveWord` is a function that returns a Promise, but it is not itself a Promise
const handleSaveWord = (exportDocIFrame: HTMLIFrameElement): Promise<any> => {
  return new Promise((resolve, reject) => {
    let converted = htmlDocx.asBlob(exportDocIFrame);
    saveAs(converted, "test.docx");
    resolve();
  });
};

Followed your corrections and it works now! Thanks for the help.

I did change exportDocIFrame to read from exportDocIFrame.contentWindow.document.body.innerHTML instead, as the htmlDocx library only parses String.

Great, glad you got it working!

Was this page helpful?
0 / 5 - 0 ratings