React-to-print: When printing no download appears

[ljrodriguez1]

Hi, i am using this to print components. mu problem is that when i am printing no download appears on the navigation, it goes directly to the folder, this means that when printing from a cellphone no share option appers. is there any way to do something eith the file after printing?

[MatthewHerbst]

That's because a print is not a download 😄

If you know the name of the file generated from the print (I assume you are saving as a PDF on a mobile device) then you could use onAfterPrint to then issue some command, though not sure what that could be since the browser won't let you issue a command directly to the OS.

I'll look into seeing if there's a way I can tell mobile browsers to treat the print as a download if it's a PDF, but my guess is that's not possible unfortunately.

[ljrodriguez1]

That was what i thought, do you know any way of downloading a component to a pdf?.

Your solution is the only one that takes the css correctly

[MatthewHerbst]

If you could find a library that converts HTML to a PDF (such as html-pdf, though it's old), then you could probably write your own print method and do that:

// iframeElement is of type HTMLIFrameElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement
const customPrint = (iframeElement) => {
  return new Promise((resolve, reject) => {
    try {
      const pdf = convertHTMLToPDF(iframeElement);
      // download pdf
      resolve();
    } catch (error) {
      reject(error);
    }
  });
};

<ReactToPrint print={customPrint} trigger={...} content={...} />

[lunadis]

If you could find a library that converts HTML to a PDF (such as html-pdf, though it's old), then you could probably write your own print method and do that:

// iframeElement is of type HTMLIFrameElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement
const customPrint = (iframeElement) => {
  return new Promise((resolve, reject) => {
    try {
      const pdf = convertHTMLToPDF(iframeElement);
      // download pdf
      resolve();
    } catch (error) {
      reject(error);
    }
  });
};

<ReactToPrint print={customPrint} trigger={...} content={...} />

Did not work for me
not exists "print" props on ReactToPrint.

It's possible to get file before or after printing? 

[MatthewHerbst]

@lunadis what version of react-to-print are you using? react-to-print doesn't generate a PDF, so there is no file available to give, just the iframe with all the print content

[lunadis]

@MatthewHerbst  Oh, ok! I can use the same solution with any htlm converter if I get the iframe. I am using "react-to-print": "^2.5.1"

[ljrodriguez1]

@lunadis Could you post your solution?

[MatthewHerbst]

@lunadis the print prop was introduced in version 2.10.0, though I recommend updating to the most recent version available, especially since we have had a bunch of big bug fixes in the last few months

[lunadis]

@lunadis Could you post your solution?

@joeldenning Of course! I thought to do in this way

customPrint = (iframeElement) => {
    console.log(iframeElement)
    return new Promise((resolve, reject) => {
      try {
        html2canvas(iframeElement).then((canvas) => {
          const img = canvas.toDataURL('image/png')
          const pdf = new jsPDF()
          pdf.addImage(img, "JPEG", 0, 0, 210, 297)
          pdf.save()
        })
        resolve();
      } catch (error) {
        reject(error);
      }
    });
}

@lunadis the print prop was introduced in version 2.10.0, though I recommend updating to the most recent version available, especially since we have had a bunch of big bug fixes in the last few months

@MatthewHerbst Ok, now its available, but I try with this solution and is not working yet.
My function is not called, I am using a class component this is important?

[MatthewHerbst]

Hi @lunadis from what I can see in your code snippet above, the resolve needs to be _inside_ the .then block, right after the pdf.save call. What's happening right now is that your html2canvas(iframeElement) call fires, and then resolve is called before the .then is called since the html2canvas(iframeElement) might take some time

[MatthewHerbst]

@lunadis did that resolve your issue?

[lunadis]

@MatthewHerbst sorry for delay! Yes, this solved the problem only thing I did after is using clone prop of htm2canvas and resizing the image