Is it possible to create a PDF automatically without opening a print window?

[konstantinkrumin]

Hello,

On my web app I have 2 buttons: Print and Share.

I set up react-to-print library to work with Print button, it opens up a print overlay with contents of the page and I'm able to either print it directly or save as PDF as it is supposed to be. However, on Share button click I would like to open an overlay inside the app from which user would be able to send a PDF with contents of the page to emails or other messengers, therefore I would need to have a PDF document generated automatically, when user clicks on Share button, that would be attached to emails or messages sent out.

Is there a way to set it up with react-to-print library?

[MatthewHerbst]

Hello. react-to-print does not actually generate a PDF. We just generate HTML which the browser (Chrome, Firefox, etc) then converts to a PDF. If you want to create a PDF on the client you would need to use a PDF generation library such as @react-pdf/renderer. Hope that helps!

[konstantinkrumin]

@MatthewHerbst Thank you!

[konstantinkrumin]

@MatthewHerbst is there actually a way to hook in the hook to get a generated HTML without opening this print window and just simply reuse the HTML generated with such library as html2canvas to create a screenshot of it and then input it to the React-pdf?

[MatthewHerbst]

Yes! You can pass a print prop to react-to-print which receives the generated iframe, and can return a Promise:

const handlePrint = useReactToPrint({
  ...,
  print: async (printIframe: HTMLIframeElement) => {
    // Do whatever you want here, including asynchronous work
    await generatePDFFunction(printIframe);
  },
});

[konstantinkrumin]

@MatthewHerbst Thanks! I tried this one and I was able to extract HTML from this iFrame, however the styling went completely off. I noticed that react-to-print library is passing that additional styling that I added for printing inside <style><style /> tags, so the library I'm using next to generate PDF file is getting messy layout (which I guess makes sense since those tags are only for print)

const handleShare = useReactToPrint({
		content: () => componentRef.current,
		documentTitle: `${documentTitle}.pdf`,
		copyStyles: true,
		print: async (printIframe: HTMLIFrameElement) => {
			const document = printIframe.contentDocument;
			if (document) {
				const html = document.getElementsByTagName('html')[0];
				console.log(html);
				await html2pdf().from(html).save();
			}
		}
	});

[MatthewHerbst]

Yeah, since you aren't actually printing the @media print queries won't work. You should be able to pass in any styles you need though to make it look nice. You can override the default styles react-to-print sets by passing the pageStyle, though by default all we really do is change the margin a bit and hide the URL

[JoelRaglant]

@MatthewHerbst Thanks! I tried this one and I was able to extract HTML from this iFrame, however the styling went completely off. I noticed that react-to-print library is passing that additional styling that I added for printing inside <style><style /> tags, so the library I'm using next to generate PDF file is getting messy layout (which I guess makes sense since those tags are only for print)

const handleShare = useReactToPrint({
		content: () => componentRef.current,
		documentTitle: `${documentTitle}.pdf`,
		copyStyles: true,
		print: async (printIframe: HTMLIFrameElement) => {
			const document = printIframe.contentDocument;
			if (document) {
				const html = document.getElementsByTagName('html')[0];
				console.log(html);
				await html2pdf().from(html).save();
			}
		}
	});

Thank you for this. I tried the same. But onAfterPrint function is not getting triggered once the pdf got saved. Any idea?

[MatthewHerbst]

@JoelRaglant that's a bug! We forgot to call it when a custom print function is used. Will get a fixed up version published tonight, sorry about that

[MatthewHerbst]

@JoelRaglant should be fixed in v2.14.7, please let me know if you run into additional issues

[JoelRaglant]

Thank you @MatthewHerbst !! It works fine now.

[eseTunde]

@MatthewHerbst Thanks! I tried this one and I was able to extract HTML from this iFrame, however the styling went completely off. I noticed that react-to-print library is passing that additional styling that I added for printing inside <style><style /> tags, so the library I'm using next to generate PDF file is getting messy layout (which I guess makes sense since those tags are only for print)

const handleShare = useReactToPrint({
		content: () => componentRef.current,
		documentTitle: `${documentTitle}.pdf`,
		copyStyles: true,
		print: async (printIframe: HTMLIFrameElement) => {
			const document = printIframe.contentDocument;
			if (document) {
				const html = document.getElementsByTagName('html')[0];
				console.log(html);
				await html2pdf().from(html).save();
			}
		}
	});

Thank you for this. I tried the same. But onAfterPrint function is not getting triggered once the pdf got saved. Any idea?

Hello, I'm trying to do this same thing. Was this all you used to create pdf download to local folder on the click of a button?

[guilhermevieira010797]

where the h*** this 'html2pdf' comes from? on typescript/nextjs